jquery 确定元素是否为表单字段

ma8fv8wu  于 2023-06-22  发布在  jQuery
关注(0)|答案(5)|浏览(164)

有什么方便的方法来确定一个选中的元素是否是一个表单域,即是一个输入,选择,复选框等?

utugiqy6

utugiqy61#

您可以使用.is(':input')来测试它是否是任何类型的表单元素。
参考文献:

6rvt4ljy

6rvt4ljy2#

使用纯JavaScript:

$("#someelement")[0].tagName // will return name of tag (div, p, input, select, etc...)

任何jQuery对象的第一个索引[0]将返回其DOM对象。完全用JavaScript实现:

document.getElementById("someelement").tagName;
06odsfpq

06odsfpq3#

在纯JavaScript**中,您可以执行类似Sizzle Engine的操作

/^(?:input|select|textarea|button)$/i.test(el?.nodeName)

示例

/**
 * Test is form action element
 * @param {Object} el 
 * @return {Boolean} true if a form action element
 */
const isInput = el => /^(?:input|select|textarea|button)$/i.test(el?.nodeName);

// DEMO:
document.querySelectorAll('.foo').forEach(el => console.log(isInput(el)));
<textarea class="foo">test</textarea>
<button class="foo">test</button>
<input class="foo" type="text">
<div class="foo">test</div>
<p class="foo">test</p>

https://github.com/jquery/sizzle/blob/master/src/sizzle.js#L139

trnvg8h3

trnvg8h34#

十年后,.is(":input")可能已经不够了,因为input selector
选择**[仅]**所有输入、文本区域、选择和按钮元素
但是我们也可以有WebComponents with attached internals,它也可以充当表单字段。
要确定元素是否是表单字段,纯JavaScript将是

function isFormField(elem) {
  // elem is expected to be HTMLElement instance
  return "value" in elem;
}

...或者,如果你喜欢jQuery,它可以被简化为 awesome conscious extension

$.fn.isFormField = function(index=0) {
  let elem = this.get(index);
  if (!(elem instanceof HTMLElement)) return false;
  return "value" in elem;
}

if ($(myElement).isFormField()) ...

...或者,如果你使用ES6+,有一种 * 复杂 * 的编码方式,这很糟糕

const isFormField = elem => elem instanceof HTMLElement && "value" in elem;

if (isFormField(myElement)) ...

我希望我正确地使用了jQuery术语。

jdg4fx2g

jdg4fx2g5#

$('#formid').find('id_element');
jquery find
希望这对你有帮助

相关问题