html5控件

找了一个html5 控件的例子，一起看看吧 sample My name is:<input type="text" id="name" name="name" required> required 指明它是必填项 My email address is:   <input type="email" id="email" name="email" required> type="email" 指明它必须是一个有效email地址，通常我们用js判断，现在自带         了。 (at least 6 characters, no spaces) <input type="password" id="password" name="password" required pattern="\S{6,}"> pattern="\S{6,}"说明这个文本框必须符合了一个正则 On a scale of 1 to 10, my knowledge of HTML5 is: <input min="1" max="10" step="2" id="rating" name="rating" type="range" > 范围文本框，最小1，最大10。步数2 日期控件<input type="date" id="startdate" name="startdate" min="1904-03-17" max="1904-05-17" required> 最小，最大日期 数字数据框<input type="number" name="quantity" id="quantity" min="1" max="10" value="1"> 最小1，最大10。输入不在范围的数字，提交表单时会报错 //!Modernizr.input.placeholder 用js判断当前浏览器是否支持html5，不支持的话把placeholder的内容放在直接放在文本框内。

if (!Modernizr.input.placeholder) {

              $("input[placeholder], textarea[placeholder]").each(function () {

                  if ($(this).val() == "") {

                      $(this).val($(this).attr("placeholder"));

                      $(this).focus(function () {

                          if ($(this).val() == $(this).attr("placeholder")) {

                              $(this).val("");

                              $(this).removeClass('placeholder');

                          }

                      });

                      $(this).blur(function () {

                          if ($(this).val() == "") {

                              $(this).val($(this).attr("placeholder"));

                              $(this).addClass('placeholder');

                          }

                      });

                  }

              });

// 提交时。遍历每个含有[placeholder]的控件。如果内容和placeholder的一致，说明没有填，然后把它设置为空。

              $('form').submit(function () {

                  // first do all the checking for required element and form validation. 

                  // Only remove placeholders before final submission

                  var placeheld = $(this).find('[placeholder]');

                  for (var i = 0; i < placeheld.length; i++) {

                      if (($(placeheld[i]).val() == $(placeheld[i]).attr('placeholder'))) {

                          // if not required, set value to empty before submitting

                          $(placeheld[i]).attr('value', '');

                      }

                  }

              });

          }

转载于:https://www.cnblogs.com/xuyuchen/p/8283040.html