How to know if the text in a textbox is selected?

Question

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.

Thanks

Answer 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/

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

Answer 2

2017 Specific Answer - Faced the same issue recently.

We were allowing users to enter only 3 digits at a time. When the user tried to enter the fourth character we returned 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.

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

Answer 4

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

HTML:

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

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/

Answer 5

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

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

Answer 6

If you're use case is simply to know whether any text is selected.

The difference between selectionStart and selectionEnd is always zero when no text is selected irrespective of cursor position.

So this should do the trick

const element = document.getElementById('inputbox');

const isTextSelected = element.selectionStart - element.selectionEnd;