html:html5:form

차이

문서의 선택한 두 판 사이의 차이를 보여줍니다.

차이 보기로 링크

--- html:html5:form [2012/07/16 23:56]
kwon37xi 새로 만듦
+++ html:html5:form [2013/02/26 11:26] (현재)
kwon37xi [multiple]
@@ 줄 14: / 줄 14: @@
   * placeholder : input 영영에 안내 문구 넣기
   * contenteditable : input이 아닌 일반 엘리먼트에 지정하여 input 처럼 즉시 수정할 수 있게 한다.
+  * autocomplete="off" : 해당 입력필드 자동입력기능 끄기
+===== HTML5 지원여부 검사 =====
+  * 각 타입별로 input 객체를 생성해서 type을 지정해보고 값을 입력해서 정확한 값이 들어가는지 테스트해볼 수 있다.
+  * [[http://modernizr.com/|Modernizr]]를 통해 HTML5와 CSS3 최신 기법의 사용 가능성을 검사할 수 있다.
+===== Color =====
+  * 대체제 : [[http://recursive-design.com/projects/jquery-simple-color/|jQuery SimpleColor]]
+  * color 지원여부 검사<code javascript>
+function hasColorSupport() {
+  input = document.createElement("input");
+  input.setAttribute("type", "color");
+  var hasColorType = (input.type !== "text");
+  // handle Safari/Chrome partial implementation
+  if(hasColorType){ // <label id="code.js.webkit" />
+    var testString = "foo";
+    input.value=testString;
+    hasColorType = (input.value != testString);
+  }
+  return(hasColorType);
+}
+</code>
+===== autofocus =====
+<code javascript>
+function hasAutofocus() {
+  var element = document.createElement('input');
+  return 'autofocus' in element;
+}
+$(function(){
+   if(!hasAutofocus()){
+     $('input[autofocus=autofocus]').focus();
+   }
+});
+</code>
+===== placeholder =====
+<code javascript>
+function hasPlaceholderSupport() {
+  var i = document.createElement("input");
+  return "placeholder" in i;
+}
+</code>
+===== contenteditable =====
+  * contenteditable="true" 형태로 일반 필드에 지정한다.
+  * blur 이벤트를 받아서 해당 값이 변경되면 저장해 Ajax 호출로 저장한다.
+<code javascript>
+if (document.getElementById("요소ID").contentEditable != null) {
+  // content editable을 지원할 때 하는 작업
+}
+</code>
+===== multiple =====
+  * [[http://www.w3schools.com/tags/att_input_multiple.asp|input multiple]] input 시 다중 선택이 가능하다. 대부분의 최신 브라우저들, IE 10+
+  * ''type''이 ''email''과 ''file'' 일 경우에만 작동한다.

html/html5/form.1342450596.txt.gz · 마지막으로 수정됨: 2012/07/16 23:56 저자 kwon37xi