Chrome 为什么有些输入元素有setSelectionRange属性,以及如何测试是否实际支持该属性?

mtb9vblg  于 2022-12-06  发布在  Go
关注(0)|答案(2)|浏览(250)

我很确定我曾经测试过setSelectionRange属性的复选框,他们没有。但在一些浏览器中似乎已经改变了(测试过Firefox和Chrome)。
我通常在进行选择之前检查setSelectionRange属性,如下所示:

if (el.setSelectionRange) {
  el.setSelectionRange(0, 9999);
}

但是,由于复选框似乎具有setSelectionRange属性,因此这会引发错误。
那么,现在如何测试是否可以进行选择呢?
这里还有一个小提琴:
https://jsfiddle.net/kb2ad5b5/
"一些背景知识“
测试位于父代的委派事件侦听程式中,该侦听程式会选取任何项目中可执行此动作的范围。

oxcyiej7

oxcyiej71#

它们有一个setSelectionRange,因为该方法是在HTMLInputElement接口中定义的,因此所有输入都继承它,即使它们是复选框。
当然,setSelectionRange并不适用于所有输入,在这种情况下,它会抛出:
对于input元素,在这些方法不适用时调用它们,并在这些属性不适用时设置它们,必须引发"InvalidStateError"x 1 m4n1x;并且在这些属性不适用时获取这些属性必须返回null。否则,它们必须按如下所述进行操作。
它仅适用于文本、搜索、URL、电话和密码输入。
所以你可以这样做

if (["text", "search", "url", "tel", "password"].indexOf(input.type) >= 0) {
  input.setSelectionRange(start, end);
}

或者,您可以使用try-catch陈述式:

try {
  input.setSelectionRange(start, end);
} catch(err) {
  if (err instanceof DOMException && err.name === "InvalidStateError") {
    // setSelectionRange does not apply
  } else {
    throw err;
  }
}
tjvv9vkg

tjvv9vkg2#

复选框具有setSelectionRange()方法,因为它是为HTMLInputElement元素的接口定义的。

interface HTMLInputElement : HTMLElement {
    ...
    void setSelectionRange(unsigned long start, unsigned long end, optional DOMString direction);
}

请参阅表单上的HTML5 W3C规范:https://www.w3.org/TR/html5/forms.html
为了确保input元素支持对setSelectionRange()的调用,您可以维护一个支持的输入类型的白名单。因此,您可以检查/(text|password)/.test(el.type)

相关问题