jQuery – select all text from a textarea

by

To stop the user from getting annoyed when the whole text gets selected every time they try to move the caret using their mouse, you should do this using the focus event, not the click event. The following will do the job and works around a problem in Chrome that prevents the simplest version (i.e. just calling the textarea’s select() method in a focus event handler) from working.

jsFiddle: http://jsfiddle.net/NM62A/

Code:

<textarea id="foo">Some text</textarea>

<script type="text/javascript">
    var textBox = document.getElementById("foo");
    textBox.onfocus = function() {
        textBox.select();

        // Work around Chrome's little problem
        textBox.onmouseup = function() {
            // Prevent further mouseup intervention
            textBox.onmouseup = null;
            return false;
        };
    };
</script>

jQuery version:

$("#foo").focus(function() {
    var $this = $(this);
    $this.select();

    // Work around Chrome's little problem
    $this.mouseup(function() {
        // Prevent further mouseup intervention
        $this.unbind("mouseup");
        return false;
    });
});

More Related Contents:

  1. How can I get form data with JavaScript/jQuery?
  2. How to reset a form using jQuery with .reset() method
  3. Persisting the changes of range objects after selection in HTML
  4. JavaScript eyedropper (tell color of pixel under mouse cursor)
  5. Limit number of lines in textarea and Display line count using jQuery
  6. Drop-down box dependent on the option selected in another drop-down box
  7. How to hide form code from view code/inspect element browser?
  8. How to prevent page from reloading after form submit – JQuery
  9. jquery validate plugin on dynamic form inputs not working
  10. Property ‘submit’ of object # is not a function
  11. Adding rows dynamically with jQuery
  12. Best JavaScript solution for client-side form validation and interaction? [closed]
  13. How to ajax-submit a form textarea input from CKEditor?
  14. Count textarea characters
  15. jQuery Change event on an element – any way to retain previous value?
  16. Is there a way to make a text area partially editable? (make only portions of the text editable)
  17. Detect which form input has focus using JavaScript or jQuery
  18. What is the meaning of onsubmit=”return false”? (JavaScript, jQuery)
  19. Trigger standard HTML5 validation (form) without using submit button?
  20. jQuery – Create hidden form element on the fly
  21. jQuery: checking if the value of a field is null (empty)
  22. CSS Textarea that expands as you type text [duplicate]
  23. How can I get all a form’s values that would be submitted without submitting [duplicate]
  24. Trigger standard HTML validation (form) without using submit button? [duplicate]
  25. Calculate Position of selected text javascript/JQuery?
  26. jQuery see if any or no checkboxes are selected
  27. Get value from text area [duplicate]
  28. Get content of span
  29. .js.erb VS .js
  30. jquery serialize and multi select dropdown

Leave a Comment