Question

我在表单外面有一些输入字段。使用HTML5表单属性

<form id="myform">
    <input type="text" name="mytext" />
    <input type="submit" value="test" />
</form>
<input form="myform" type="hidden" name="extra" id="extra" value="777" />
<select form="myform" name="filter" id="filter">
    <option>1</option>
    <option>2</option>
    <option>3</option>
</select>

并尝试在提交

上序列化表单

$('#myform').on('submit', function (e) {
    var query = $(this).serialize();
    if ($.browser.msie) { 
        //fixed form attribute not supported in IE
        var extra = $('[form=myform]').each(function () {
            if (/(=)\w*/gi.test(query)) query += '&';
            query += this.name + '=' + this.value;
        });
    }
    console.log(query);
    return false;
});

但目前http://api.jquery.com/jquery.browser/说

“此属性已在jQuery 1.9中删除，只能通过jQuery.migrate插件使用。请尝试使用功能而是检测。“

那么如何检测该浏览器支持此表单属性功能？还是有更好的方法来做到这一点

Answer 1

如果您想在不使用外部插件或库的情况下检查form属性，可以尝试以下操作：

更改：

if ($.browser.msie) {

要

if ($("#extra")[0].form === null) {

有关$("#extra")[0]使用原因的详细信息，请参阅document.getElementById vs jQuery $()。

导致：

$('#myform').on('submit', function (e) { var query = $(this).serialize(); if ($("#extra")[0].form === null) { //fixed form attribute not supported in IE var extra = $('[form=myform]').each(function () { if (/(=)\w*/gi.test(query)) query += '&'; query += this.name + '=' + this.value; }); } console.log(query); return false; });

JS小提琴：

http://jsfiddle.net/ezq9mu1a/1/

据我所知，这是Modernizr所做的那种检查（尽管我认为它会动态创建输入以进行测试）。在IE中运行这个小提琴触发后备代码，而Safari，Chrome，Firefox和Opera只使用serialize。

修改

由于我们无法依赖页面中的现有元素，因此我们需要创建一个测试form和input，以便检查是否支持form属性。为此，我们可以通过以下方式修改代码：

添加

//Create test elements and amend them to the DOM var testForm = $('<form />', { 'id': "testForm" })[0]; var testInput = $('<input />', { 'form': "testForm" })[0]; $('body').append(testForm, testInput); //Set a variable to store whether the form attribute is supported var formSupported = (testInput.form !== null) ? true : false; //Remove the test elements from the DOM $(testForm).remove(); $(testInput).remove();

更改：

if ($("#extra")[0].form === null) {

要

if (!formSupported) {

导致：

//Create test elements and amend them to the DOM var testForm = $('<form />', { 'id': "testForm" })[0]; var testInput = $('<input />', { 'form': "testForm" })[0]; $('body').append(testForm, testInput); //Set a variable to store whether the form attribute is supported var formSupported = (testInput.form !== null) ? true : false; //Remove the test elements from the DOM $(testForm).remove(); $(testInput).remove(); if (!formSupported) { $("#formSupported").html("No"); } $('#myform').on('submit', function (e) { var query = $(this).serialize(); if (!formSupported) { //fixed form attribute not supported in IE var extra = $('[form=myform]').each(function () { if (/(=)\w*/gi.test(query)) query += '&'; query += this.name + '=' + this.value; }); } console.log(query); return false; });

JS小提琴：

http://jsfiddle.net/ezq9mu1a/3/

Answer 2

使用jQuery Migrate插件https://github.com/jquery/jquery-migrate/#readme

或使用modernizr（http://modernizr.com/）

Answer 3

修改，更新

注意，试图在11

V2

// click `test`
$("#myform").on("submit", function(e) {
e.preventDefault();
if ("msFlex" in document.body.style) {
var query = "";
$("[form=myform]").not("form *").each(function (k, v) {
    var params = ["name", "value"];
    $.each(params, function (i, val) {
        query += (val === "name" 
                   ? "&" + $(v).prop(val) + "=" 
                   : $(v).prop(val)
                   );
    });
});
// do stuff
// tried at ie11 , `$("[form=myform]").serialize()`
// appear to serialize those elements ?
// see `console` ?
// either `query` or `$("[form=myform]").serialize()`
// should return `&extra=777&filter=1` 
// possible reason `checkFormAttr()` returned `true` ?
// tried `v1` with `checkFormAttr()` ? without `!` ?
console.log(query, $("[form=myform]").serialize());
$("body").append(query)
};
})

http://jsfiddle.net/guest271314/g4v2fcaa/10/（v2）

&extra=777&filter=1

应附加到文档

V1

function checkFormAttr() {
  var form = document.createElement("form");
  form.id = "abc";
  var input = document.createElement("input");
  input.type = "text";
  input.form = "abc";
  form.appendChild(input);
  console.log(form, input.form);
  // (form === input.form) => `true` if supported 
  // (form !== input.form) => cast as `false`
  return (form === input.form) // `false` if not supported
};

包括在OP中的片段，

$("#myform").on("submit", function( event ) {
  event.preventDefault();
  var query = $(this).serialize();
    if (!checkFormAttr()) { 
        //fixed form attribute not supported in IE
        var extra = $('[form=myform]').each(function () {
            if (/(=)\w*/gi.test(query)) query += '&';
            query += this.name + '=' + this.value;
        });
    }
    console.log(query);
    return false;
});

或者，检查document.body.style是否有特定vendor-prefixes，

var ms = (("msFlex" || "msAnimation") in document.body.style );
var webkit = ("WebkitAnimation" in document.body.style );
var moz = ("MozAnimation" in document.body.style );
var opera = ("OTransition" in document.body.style );

console.log("form attribute:"+ checkFormAttr()
            + "\nform attribute , cast as `false`:"+ !checkFormAttr()
            + "\nms:" + ms 
            + "\nwebkit:" + webkit
            + "\nmoz:" + moz 
            + "\nopera:" + opera);

jsfiddle http://jsfiddle.net/guest271314/g4v2fcaa/

请参阅HTML5

上的4.10.18.3 Association of controls and forms

检测HTML5输入的表单属性，如果不支持则尝试序列化

3 个答案: