How to highlight a part part of an Input text field in HTML using Javascript or JQuery

by

Within a text input box, your only opportunity for highlighting just a part of the text is using the selection. You can do this in all modern browsers with the text box’s selectionStart and selectionEnd properties, or setSelectionRange() method (no idea why both exist).

Live demo: http://jsfiddle.net/YNr7K/

Code:

var input = document.getElementById("textBoxId");
input.value = "Cup of tea";
input.setSelectionRange(0, 3); // Highlights "Cup"
input.focus();

In older versions of IE (< 9), you’ll need to use one of their tiresome TextRanges. See this answer for a function that shows how to do this.

More Related Contents:

  1. This doesn’t seem right? Javascript isn’t working
  2. Limit number of lines in textarea and Display line count using jQuery
  3. Best JavaScript solution for client-side form validation and interaction? [closed]
  4. Trigger standard HTML validation (form) without using submit button? [duplicate]
  5. .val() don't edit input
  6. How to have html popup appear over main html page?
  7. jQuery document.getElementById() issue
  8. Write tags in HTML and print
  9. Any Javascript GURU here to make this Script ? If Anchor is Changed Redirect the Page
  10. jquery get id of input selected text
  11. Change from (+) symbol to (-) after click (function(){
  12. jQuery Data vs Attr?
  13. jQuery ID selector works only for the first element
  14. Get class list for element with jQuery
  15. How to disable HTML links
  16. Cross-browser multi-line text overflow with ellipsis appended within a fixed width and height
  17. How to style “input file” with CSS3 / Javascript? [duplicate]
  18. HTML5 Canvas toDataURL returns blank
  19. How to get nth-child selector to skip hidden divs [duplicate]
  20. Property ‘submit’ of object # is not a function
  21. How to convert HTML to JSON using PHP?
  22. How to keep the menu state on page reload
  23. Javascript Code works in jsfiddle and but not in the Browser [closed]
  24. Download attribute not working in Firefox
  25. Set focus and cursor to end of text input field / string w. Jquery [duplicate]
  26. Play HTML5 Video when scrolled to
  27. jQuery Popup Bubble/Tooltip [closed]
  28. How do I make a div full screen?
  29. How to replace numbers in body to Persian numbers?
  30. Find and replace nth occurrence of [bracketed] expression in string

Leave a Comment