如何知道文本框中的文本是否被选中？

I have text boxes <input type='text'> that only allow numeric characters and wont let the user enter a dot (.) more than once. Problem is, if the text in the text box is selected, the user intends to overwrite the contents with a dot, hence making it allowed! The question is, how can you tell in javascript whether the text in that text box is selected or not.

我有文本框只允许数字字符，不会让用户多次输入点（。）。问题是，如果选中文本框中的文本，则用户打算用点覆盖内容，从而允许它！问题是，如何在javascript中判断该文本框中的文本是否被选中。

Thanks

谢谢

5 个解决方案

#1

The following will tell you whether or not all of the text is selected within a text input in all major browsers.

以下内容将告诉您是否在所有主流浏览器的文本输入中选择了所有文本。

Example: http://www.jsfiddle.net/9Q23E/

示例：http：//www.jsfiddle.net/9Q23E/

Code:

码：

function isTextSelected(input) {
    if (typeof input.selectionStart == "number") {
        return input.selectionStart == 0 && input.selectionEnd == input.value.length;
    } else if (typeof document.selection != "undefined") {
        input.focus();
        return document.selection.createRange().text == input.value;
    }
}

#2

Instead of hitting the wall of digits dots and selections you can climb it easily by checking the value in onchange event.

您可以通过检查onchange事件中的值来轻松攀爬，而不是点击数字点和选择的墙壁。

HTML:

HTML：

<input type="text" onchange="ValidateNumericValue(this);" />

JS:

JS：

function ValidateNumericValue(oInput) {
    var blnRequired = true; //set to false if allowing empty value

    var sValue = oInput.value;
    if (blnRequired && sValue.length == 0) {
        alert("Please enter a value");
        oInput.focus();
        return;
    }

    var numericValue = parseFloat(sValue);
    if (isNaN(numericValue)) {
        alert("Value is not a valid number");
        oInput.focus();
        return;
    }

    //put back to make 2.15A back to 2.15
    oInput.value = numericValue + "";
}

This will check the value when changed (and user go to different element) and when not valid will alert and set focus back.

这将在更改时检查值（并且用户转到不同的元素），当无效时将提醒并设置焦点。

Live test case: http://jsfiddle.net/yahavbr/NFhay/

现场测试案例：http：//jsfiddle.net/yahavbr/NFhay/

#3

For anyone who needs the code to get at the selected text within a textbox, here's an enhanced version:

对于需要代码来获取文本框中所选文本的任何人，这里是一个增强版本：

http://jsfiddle.net/9Q23E/527/

function getSelection(textbox) 
{
   var selectedText = null;
   var activeElement = document.activeElement;

   // all browsers (including IE9 and up), except IE before version 9 
   if(window.getSelection && activeElement && 
      (activeElement.tagName.toLowerCase() == "textarea" || (activeElement.tagName.toLowerCase() == "input" && activeElement.type.toLowerCase() == "text")) &&
      activeElement === textbox) 
   {
      var startIndex = textbox.selectionStart;
      var endIndex = textbox.selectionEnd;

      if(endIndex - startIndex > 0)
      {
          var text = textbox.value;
          selectedText = text.substring(textbox.selectionStart, textbox.selectionEnd);
      }
   }
   else if (document.selection && document.selection.type == "Text" &&  document.selection.createRange) // All Internet Explorer
   {       
       var range = document.selection.createRange();
       selectedText = range.text;
   }    

    return selectedText;
}

#4

You can get the id of the selected element in the page with the following code:

您可以使用以下代码获取页面中所选元素的ID：

elem_offset = document.getSelection().anchorOffset;
elem = document.getSelection().anchorNode.childNodes[elem_offset];
alert(elem.id);

#5

2017 Specific Answer - Faced the same issue recently.

2017年具体答案 - 最近面临同样的问题。

We were allowing users to enter only 3 digits at a time. When the user tried to enter the fourth character we returned false.

我们允许用户一次只输入3位数字。当用户试图输入第四个字符时，我们返回false。

This became an issue when the user had a selection and was trying to overwrite the values.

当用户进行选择并尝试覆盖值时，这就成了一个问题。

Taking a hint from Tim's answer. I understood that I wanted to see if the selection value was same as the input's value.

从蒂姆的答案中得到一个暗示。我明白我想看看选择值是否与输入值相同。

In modern browsers I achieved it by doing:

在现代浏览器中，我通过以下方式实现：

document.getSelection().toString() === input.value // edited

Hope this helps someone.

希望这有助于某人。

#1