如何判断文本框中的文本是否被选中？

前端开发中，有时需要判断用户是否已经选中了文本框中的文本。本文将介绍如何使用 JavaScript 来实现这个功能。

方法一：使用 Selection 对象

Selection 对象表示用户选择的文本范围，我们可以通过它来判断文本框中的文本是否被选中。

const input = document.getElementById('myInput');
const isTextSelected = () => {
  const selection = window.getSelection();
  return selection.containsNode(input, true);
}

上面的代码中，我们首先获取输入框 DOM 元素 myInput，然后定义了一个函数 isTextSelected，该函数会返回布尔值，表示文本框中的文本是否被选中。

在函数内部，我们调用了 window.getSelection() 方法获取 Selection 对象，然后使用 containsNode() 方法判断该对象是否包含了文本框元素。

如果 containsNode() 返回 true，则说明文本框中的文本已经被选中了。

方法二：使用 document.activeElement 属性

另一种判断文本框是否被选中的方法是使用 document.activeElement 属性。

const input = document.getElementById('myInput');
const isTextSelected = () => {
  return input === document.activeElement && input.selectionStart !== input.selectionEnd;
}

上面的代码中，我们同样先获取输入框 DOM 元素 myInput，然后定义了一个函数 isTextSelected。该函数同样返回一个布尔值，表示文本框中的文本是否被选中。

在函数内部，我们首先判断 input 元素是否为当前活动元素，即用户最近选择的元素。如果不是，那么说明输入框中的文本没有被选中。

如果 input 元素是当前活动元素，我们再使用 selectionStart 和 selectionEnd 属性来判断输入框中的文本是否被选中。当这两个属性的值相等时，表示没有文本被选中；否则，就表示有文本被选中了。

总结

以上是两种判断文本框中的文本是否被选中的方法，它们各有优缺点。第一种方法更加通用，可以适用于任何元素，但需要更多的代码。第二种方法则更加简洁，但只适用于文本框元素。

在实际开发中，根据具体需求来选择合适的方法即可。

<input type="text" id="myInput">

上面是一个简单的文本框示例，你可以在选中文本框中的文本后，运行上述代码来检查文本框是否被选中。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/27038