Javascript 我如何轻松地选择我可以实际写东西的输入

我将如何在短时间内完成以下工作

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

像

$（':canTypeIn'）

这样的东西会很好

我想选择所有接受输入字符的输入或文本区域，例如不返回的输入：

• 输入[type=checkbox]

• input[type=radio]

• 输入[类型=隐藏]

• 输入[类型=颜色]

等等

返回输入的示例

• 输入[type=text]

• textarea

• 输入[type=number]

• [内容可编辑]

• 输入[类型=密码]

等等

---

我搜索的是一种选择所有这些输入的方法，而不必逐个键入。

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

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');
});

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));
});

---

所以这可能有点俗气，但这是一个想法

在css中，根据每个元素的ID设置显示值

然后为每个输入设置一个ID

设置输入或ID的全局变量，并在需要时使用它：

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
  }
});

---

您可以使用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");

下面是一个正在工作的JSFIDLE示例

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');
});

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));
});

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

---

（多亏了gfrobenius的启动——我以html为例！）

只读输入字段怎么样？还是一个元素？如果选择该选项？您只需执行

$（'input，textarea'）

$（'input，textarea'）

？不要选择

input[type=checkbox]

或

input[type=radio]

您也可以排除不允许输入的

输入类型，像
submit
和
img
不能更改DOM，否则我会添加类。我不遵守。我不是说你必须添加类。这些场地仅供演示。您只需要使用jQuery行来找出哪些输入是可编辑的。（如果需要，请添加textarea）有意义吗？这将返回所有已启用而非只读的输入。这将包括不接受文本输入的输入。@Archer您在说什么。这就是他想要的。只有可编辑的。事实上，他也要求它不要返回看不见的领域，所以他是一个更好的回答：冷静下来-错误是没有理由粗鲁。标题是“如何轻松地选择我可以实际编写内容的输入？”您的代码将返回所有类型的输入，包括提交按钮。请解释如何在提交按钮中输入文本。很好，只选择了残疾人，但这是一个简单的编辑，谢谢。是的，很抱歉我错过了。您是对的，这是一个简单的编辑，但为了完整性，我在这里更新了代码和示例链接。很高兴我能帮忙：）