Polyfill HTML5表单属性（用于输入字段） [英] Polyfill HTML5 form attribute (for input fields)

问题描述

这是我使用的标记：

 < input type =textform =myformname = inp1/> 
< form id =myformname =myform> 
 ... 
< / form> 
  

现在我意识到它不适用于旧IE，因此我正在寻找HTML 5填充。

任何人都知道某个特定的polyfill会覆盖这个HTML5功能吗？

我通过在表单提交中复制字段来模仿这种特性，在IE6中测试，并且它工作正常。

 （函数（$）{
 / ** 
 * html5格式的属性
 * / 
 
 //检测浏览器是否支持此
 var sampleElement = $（'[form]'）。get（0）; 
 var isIE11 =！（window。 （sampleElement& window.HTMLFormElement&&&&& ;&（sampleElement.form instanceof HTMLFormElement || sampleElement instanceof window.HTMLFormElement）&&！isIE11（< ActiveXObject）&&ActiveXObjectin window; 
 if ）{
 //浏览器支持它，不需要修复
 return; 
} 
 
 / ** 
 *将一个字段附加到表单
 * 
 * / 
 $ .fn.appendField = function（data）{
 //仅用于表格
 if（！this.is（'form'））如果（！$。isArray（data）&&& data.name&& amp; data.value）{
 data = [
 $ b $ // wrap data 
数据]; 
} 
 
 var $ form = this; 
 
 //附加新参数
 $ .each（data，function（i，item ）{
 $（ '< input />'）
 .attr（'type'，'hidden'）
 .attr（'name'，item.name）
 .val（item.value） .appendTo（$形式）; 
}）; 
 
 return $ form; 
}; 
 $ b $ ** 
 *找到所有带有form属性的输入字段指向jQuery对象
 * 
 * / 
 $（'form [id]' ）.submit（function（e）{
 //序列化数据
 var data = $（'[form ='+ this.id +']'）。serializeArray（）; 
 / /追加数据以形成
 $（this）.appendField（data）; 
}）。each（function（）{
 var form = this，
 $ fields = $（ '[form ='+ this.id +']'）; 
 
 $ fields.filter（'button，input'）。filter（'[type = reset]，[type = submit]' ）.click（function（）{
 var type = this.type.toLowerCase（）; 
 if（type ==='reset'）{
 // reset form 
 form.reset（）; 
 //用于表单元素之外的元素
 $ fields.each（function（）{
 this.value = this.defaultValue; 
 this.checked = this （函数（）{
 $（this）.find（'option'）。each（function（）{
））。filter（'select'）。 this.selected = this.defaultSelected; 
}）; 
}）; 
} else if（type.match（/ ^ submit | image $ / i））{
 $（form）.appendField（{name：this.name，value：this.value}）。submit （）; 
} 
}）; 
}）; 
 
 
}）（jQuery）; 
  

This is the markup I use:

<input type="text" form="myform" name="inp1" />
<form id="myform" name="myform">
    ...        
</form>

Now I realized that it does not work for old IE and therefore I am searching for a HTML 5 polyfill.

Anyone aware of a certain polyfill which covers this HTML5 feature?

解决方案

I wrote this polyfill to emulate such feature by duplicating fields upon form submission, tested in IE6 and it worked fine.

(function($) {
  /**
   * polyfill for html5 form attr
   */

  // detect if browser supports this
  var sampleElement = $('[form]').get(0);
  var isIE11 = !(window.ActiveXObject) && "ActiveXObject" in window;
  if (sampleElement && window.HTMLFormElement && (sampleElement.form instanceof HTMLFormElement || sampleElement instanceof window.HTMLFormElement) && !isIE11) {
    // browser supports it, no need to fix
    return;
  }

  /**
   * Append a field to a form
   *
   */
  $.fn.appendField = function(data) {
    // for form only
    if (!this.is('form')) return;

    // wrap data
    if (!$.isArray(data) && data.name && data.value) {
      data = [data];
    }

    var $form = this;

    // attach new params
    $.each(data, function(i, item) {
      $('<input/>')
        .attr('type', 'hidden')
        .attr('name', item.name)
        .val(item.value).appendTo($form);
    });

    return $form;
  };

  /**
   * Find all input fields with form attribute point to jQuery object
   * 
   */
  $('form[id]').submit(function(e) {
    // serialize data
    var data = $('[form='+ this.id + ']').serializeArray();
    // append data to form
    $(this).appendField(data);
  }).each(function() {
    var form = this,
      $fields = $('[form=' + this.id + ']');

    $fields.filter('button, input').filter('[type=reset],[type=submit]').click(function() {
      var type = this.type.toLowerCase();
      if (type === 'reset') {
        // reset form
        form.reset();
        // for elements outside form
        $fields.each(function() {
          this.value = this.defaultValue;
          this.checked = this.defaultChecked;
        }).filter('select').each(function() {
          $(this).find('option').each(function() {
            this.selected = this.defaultSelected;
          });
        });
      } else if (type.match(/^submit|image$/i)) {
        $(form).appendField({name: this.name, value: this.value}).submit();
      }
    });
  });


})(jQuery);

这篇关于Polyfill HTML5表单属性（用于输入字段）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！