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

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/说

"This property was removed in jQuery 1.9 and is available only through the jQuery.migrate plugin. Please try to use feature detection instead."

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

Answer 1

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

更改:

if ($.browser.msie) { 

致:

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

参见document.getElementById vs jQuery $()了解有关为何使用 $("#extra")[0] 的更多信息。

结果:

$('#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 fiddle :

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

据我所知，这是 Modernizr 所做的检查(尽管我认为它动态创建要测试的输入)。在 IE 中运行此 fiddle 会触发回退代码，而 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 fiddle :

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