I am trying to figure out how to highlight just some part of text inside an input box using jQuery. It's quite simple to highlight the entire contents of the input box but how do you highlight just one word or couple of letters?
Thanks!
3
-
By "select", do you mean mark it as selected? Blue, with white text?Kobi– Kobi2010-06-21 14:30:09 +00:00Commented Jun 21, 2010 at 14:30
-
1What do you mean by select? Do you mean highlight like what happens when you select with your cursor?Kekoa– Kekoa2010-06-21 14:31:04 +00:00Commented Jun 21, 2010 at 14:31
-
I fixed the wording. I used the word select but what I really meant was highlight. I apologize for the mistake.Lukasz– Lukasz2010-06-22 14:58:11 +00:00Commented Jun 22, 2010 at 14:58
Add a comment
|
2 Answers
For text <input> elements, the following will do the job. The example selects just the word "two" in the input:
function setInputSelection(input, startPos, endPos) {
input.focus();
if (typeof input.selectionStart != "undefined") {
input.selectionStart = startPos;
input.selectionEnd = endPos;
} else if (document.selection && document.selection.createRange) {
// IE branch
input.select();
var range = document.selection.createRange();
range.collapse(true);
range.moveEnd("character", endPos);
range.moveStart("character", startPos);
range.select();
}
}
document.getElementById("setSelection").onmousedown = function() {
var input = document.getElementById("i");
setInputSelection(input, 4, 7);
return false;
};<input id="i" type="text" value="One two three">
<input type="button" value="Set selection" id="setSelection">
6 Comments
Jason Foglia
Honestly, I know this is not an educational comment, but come on IE, really!! 7 lines of code versus 2. Sure your way may add more functionality to the mix, but unnecessary. Thank you Tim for providing this example!
Tim Down
@JasonFoglia: The code for doing this reliably in old IE in textareas, where there could be empty lines, is much bigger still. In fairness, IE 9 fixes this by supporting
selectionStart and selectionEnd.
Bojan Dević
I know this is old but Firefox requires this
input.focus(); before input.selectionStart = startPos;Tim Down
@BojanDević: Since textareas can have selections while not focussed in some browsers, I tend to try and keep the two things separate, but I think I agree with you for this question.
Tim Down
@vatavale: The main code will work fine for many years to come but the jsFiddle has issues with focus. I've changed it to use a code snippet instead and added a button to set the selection.
|
You will need to select the entire value, and then manipulate the string in code. Depending on what you're trying to do with the words, you might look in to using regular expressions to match certain words/letters.
1 Comment
Jason Foglia
How does your code highlight a portion of text inside of a input textbox?