Javascript 为什么有些输入元素具有setSelectionRange属性，以及如何测试是否实际支持它？

我很确定我曾经测试过

setSelectionRange

属性的复选框，但它们没有。但在某些浏览器（测试过的Firefox和Chrome）中，这种情况似乎有所改变

在做出如下选择之前，我经常检查

setSelectionRange

属性：

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

但是，由于复选框似乎具有

setSelectionRange

属性，因此会引发错误

那么，我现在如何测试是否可以进行选择呢

这里还有一把小提琴：

一些背景

---

测试是在父级的委托事件侦听器中进行的，该侦听器在可以执行此操作的任何元素中选择范围。

它们有一个

setSelectionRange

，因为方法是在中定义的，因此所有输入都继承它，即使它们是复选框

但当然不适用于所有输入，在这种情况下，它抛出：

对于

input

元素，在它们运行时调用这些方法，并在它们运行时设置这些属性， 必须扔一个；和 获取这些属性时必须返回null。 否则，它们必须按以下所述操作

它仅适用于、和输入

所以你可以做一些像

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

---

它们有一个

setSelectionRange

，因为方法是在中定义的，因此所有输入都继承它，即使它们是复选框

但当然不适用于所有输入，在这种情况下，它抛出：

对于

input

元素，在它们运行时调用这些方法，并在它们运行时设置这些属性， 必须扔一个；和 获取这些属性时必须返回null。 否则，它们必须按以下所述操作

它仅适用于、和输入

所以你可以做一些像

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

---

复选框具有

setSelectionRange（）

方法，因为它是为元素的接口定义的

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

请参见表单上的HTML5 W3C规范：

---

要确保

input

元素支持调用

setSelectionRange（）

，可以维护受支持输入类型的白名单。因此，您可以检查

/（text | password）/.test（el.type）

复选框具有

setSelectionRange（）

方法，因为它是为元素接口定义的

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

请参见表单上的HTML5 W3C规范：

---

---

要确保

input

元素支持调用

setSelectionRange（）

，可以维护受支持输入类型的白名单。因此，您可以检查

/（text | password）/.test（el.type）

为什么要检查复选框是否有

setSelectionRange

属性？@Oriol我在父级上有一个委托事件，可以选择任何可以执行此操作的元素的所有内容。为什么要检查复选框是否有

setSelectionRange

属性？@Oriol我在父级上有一个委托事件，可以选择任何元素的所有内容元素中可以执行此操作。感谢您的解释。我想测试的一个问题是它不是“未来安全的”，即如果添加了支持正常功能的新元素类型

setSelectionRange

属性，那么函数仍然会过滤掉它们。@Daniel然后使用

try catch

语句。是的，可能这是唯一的方法。奇怪的是，这个函数没有合适的测试。但是，通过try/catch，您无法区分不支持和其他错误。关于“futuresafeness”的注意事项：随着一个新的HTML规范提供了新的类型，可能也会有一个新的接口。试图调用任何

setSelectionRange（）

方法时，我认为您似乎无法控制代码。@尝试catch最后您可以检查

catch

中的错误，我添加了一个示例感谢您的解释。我想测试的一个问题是它不是“未来安全的”，即如果添加了支持正常功能的新元素类型

setSelectionRange

属性，那么函数仍然会过滤掉它们。@Daniel然后使用

try catch

语句。是的，可能这是唯一的方法。奇怪的是，这个函数没有合适的测试。但是，通过try/catch，您无法区分不支持和其他错误。关于“futuresafeness”的注意事项：随着一个新的HTML规范提供了新的类型，可能也会有一个新的接口。试图调用任何

setSelectionRange（）

方法时，我认为您似乎无法控制代码。@尝试catch最后您可以检查

catch

中的错误，我添加了一个示例感谢您的解释。知道如何正确地测试它吗？是的，白名单是可能的，但当然不是完美的（想想规范中添加的新元素，白名单将始终保持最新）。感谢您的解释。知道如何正确地测试它吗？是的，白名单是可能的，但当然不是完美的（想想规范中添加的新元素，白名单将始终保持最新）。