How can I programmatically select a specific range of text in an HTML input
field? (I don't want to select the entire field, just a subset)
Also, how can I determine the currently selected range in a field?
Here's how to select a portion of a text box (range select) and get the selected text:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title> Test </title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script type="text/javascript"> window.onload = function() { var message = document.getElementById('message'); // Select a portion of text createSelection(message, 0, 5); // get the selected portion of text var selectedText = message.value.substring(message.selectionStart, message.selectionEnd); alert(selectedText); }; function createSelection(field, start, end) { if( field.createTextRange ) { var selRange = field.createTextRange(); selRange.collapse(true); selRange.moveStart('character', start); selRange.moveEnd('character', end); selRange.select(); field.focus(); } else if( field.setSelectionRange ) { field.focus(); field.setSelectionRange(start, end); } else if( typeof field.selectionStart != 'undefined' ) { field.selectionStart = start; field.selectionEnd = end; field.focus(); } } </script> </head> <body> <input type="text" name="message" id="message" value="Hello World" /> </body> </html>
Demo
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With