Programmatically selecting partial text in an input field

by

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

More Related Contents:

  1. Set the value of an input field
  2. How do I cancel form submission in submit button onclick event?
  3. Set the default value of an input field
  4. Hot to get incomplete datetime-local input values
  5. php How to save post and save show to php file like this [closed]
  6. I need help on this project for my friend
  7. HTML5 Canvas vs. SVG vs. div
  8. addEventListener(“click”,…) firing immediately [duplicate]
  9. Upload progress indicators for fetch?
  10. Stop/Close webcam stream which is opened by navigator.mediaDevices.getUserMedia [closed]
  11. Changing the selected option of an HTML Select element
  12. jQuery UI accordion that keeps multiple sections open?
  13. Get multiple elements by Id
  14. onclick go full screen
  15. Get video duration when input a video file
  16. How to detect a long touch pressure with javascript for android and iphone?
  17. Property ‘submit’ of object # is not a function
  18. How to remove an item from an array in AngularJS scope?
  19. how to change the background image of div using javascript?
  20. HTML Alignment Issue in one machine only (both IE8)
  21. Decode HTML entities in JavaScript? [duplicate]
  22. How to move all HTML element children to another parent using JavaScript?
  23. Setting minimum size limit for a window minimization of browser?
  24. make canvas as wide and as high as parent
  25. show/hide html table columns using css
  26. Set focus and cursor to end of text input field / string w. Jquery [duplicate]
  27. Play HTML5 Video when scrolled to
  28. Override the -webkit-search-cancel-button
  29. Canvas text rendering (blurry)
  30. Fill user name and password in a webpage using VBA

Leave a Comment