javascript - 如何判断一个元素是按钮还是文本框

Question

如何确定元素是input类型button还是textjquery 中的类型？

谢谢

Answer 1

$('input').attr('type')

或者

$('input').prop('type')

演示

或者

$('input').is(':button');

$('input').is(':text');

演示

或者

$(target)[0].tagName

演示

Answer 2

如果你有：

var field = $("some selector that finds the input");

然后

field[0].tagName

...将是INPUTorBUTTON或SELECTor TEXTAREA，告诉您使用什么标签来创建该字段。

如果是INPUT，那么

field[0].type
// or
field.attr('type')
// or
field.prop('type')

...将是input标签的类型（例如"text"，，"button"等）。

实例| 来源：

HTML：

<input type="text" value="text field">
<br><input type="button" value="input button">
<br><select><option>select</option></select>
<br><textarea>textarea</textarea>
<br><button>button</button>

JavaScript：

jQuery(function($) {

  $("input, select, textarea, button").each(function(index) {
    var msg;
    var field = $(this);
    msg = "[" + index + "]: tagName is " + field[0].tagName;
    if (field[0].tagName === "INPUT") {
      msg += ", and type is " + field.prop('type');
    }
    display(msg);
  });

  function display(msg) {
    $("<p>").html(msg).appendTo(document.body);
  }
});

输出：

[0]：tagName 为 INPUT，type 为 text
[1]：tagName 为 INPUT，type 为 button
[2]: 标记名是 SELECT
[3]：tagName 是 TEXTAREA
[4]: tagName 是 BUTTON

请注意，我只在field = $(this)那里使用，以便我们在每个元素周围都有一个 jQuery 包装器。如果你已经有一个原始的 DOM 元素引用（就像我们在那个循环中所做的那样， as this），不需要这样做，直接使用elm.tagNameandelm.type即可。

Answer 3

检查元素的标签名称：

element.prop('tagName')

对于<input>标签，还要检查类型：

element.prop('type');