Question

如何在短时间内完成以下内容？

$('input[type=text], input[type=number], input[type=password], textarea')

$(':canTypeIn')之类的东西会很好。

我想选择接受输入字符的所有输入或textarea， NOT 返回输入的示例：

input[type=checkbox]
input[type=radio]
input[type=hidden]
input[type=color]

等等。

返回输入的示例

input[type=text]
textarea
input[type=number]
[contenteditable]
input[type=password]

等等

我正在搜索的是一种选择所有输入的方法，而无需逐个输入。

Answer 1

您可以使用jQuery创建自定义选择器，这意味着您需要在创建新输入类型时进行一些工作来维护它（因为它们在未来无疑将会如此），但这将使您的工作更轻松因为你只需要维护一段代码。我相信这段代码将涵盖您当前可以输入的所有类型的元素，但它非常清楚，因此对它进行任何更改应该相当简单......

$.expr[':'].canTypeIn = function(obj, index, meta, stack) {

    // immediately return false if the element is not visible or is read only
    if (obj.style.visibility === "hidden" || obj.style.display === "none" || obj.readOnly === true || obj.disabled === true) {
        return false;
    }

    // an array of input types that we know we can type in
    var types = [
        "date",
        "datetime",
        "datetime-local",
        "email",
        "month",
        "number",
        "password",
        "search",
        "tel",
        "text",
        "time",
        "url",
        "week"
    ];

    // if the element is an input then check what type of input it is
    if (obj.tagName === "INPUT") {
        return types.indexOf(obj.type) !== -1;
    }

    if (obj.tagName === "TEXTAREA") {
        return true;
    }

    return false;
};

<强>用法

$(":canTypeIn");

这是一个有效的jsfiddle示例......

<强> http://jsfiddle.net/Kz6w3/17/

打开控制台，查看可以输入的4个元素的列表。

（感谢gfrobenius的开始 - 我把html作为一个例子！）

Answer 2

更新版本3：我注意到您不想要隐藏的项目。

<强> http://jsfiddle.net/Kz6w3/8/

disabled <input id="one" type="text" disabled="true" value="test"><br>
readonly <input id="two" type="text" readonly="readonly" value="test"><br>
editable <input id="three" type="text" value="test"><br>
editable but invisible <input id="four" type="text" value="test" style="display:none;"><br>
button <input id="five" type="button" value="test"><br><br><br>

disabled <textarea id="six" disabled="true"></textarea><br>
readonly <textarea id="seven"readonly="readonly"></textarea><br>
editable <textarea id="eight"></textarea><br>
editable but invisible <textarea id="nine" style="display:none;"></textarea><br>

//just keep applying ":visible:enabled:not([readonly])" to your
//different types like you have listed in the original question.
//This works, might be a little lengthy
 $('input[type=text]:visible:enabled:not([readonly]),textarea:visible:enabled:not([readonly])').each(function() {
     alert(this.id+' is editable');
});

另一个想法

我不知道如何缩短选择器。所以创建一个EDITABLE函数实际上是更少的文本，就像这样......

<强> http://jsfiddle.net/Kz6w3/13/

window.editable=function(obj){
    if(obj.disabled) return false;
    if($(obj).is('[readonly]')) return false;
    if(obj.style.display === 'none') return false;
    return true;
}

$('input[type=text], input[type=number], input[type=password], textarea').each(function() {
    alert(this.id+' is editable: '+editable(this));
});

Answer 3

所以这可能是俗气的，但这是一个想法。

在你的css设置显示值中，基于每个元素的ID

然后为每个输入设置ID。

设置输入的全局变量或ID＆amp;在需要时使用它：

var textFields = 'input[type=text], input[type=number], input[type=password], textarea';
$(textFields).each(function(index){
  if($($(this).attr('id')).css('display') != 'none'){
    //do something
  }
});

如何轻松选择我可以实际编写内容的输入

3 个答案: