User login

Using jQuery to auto select text in a field

Searched words: 
Jquery select text form jquery select all in form jquery select textfield jquery input select search bar jquery select all text field

So you've custom themed a search bar into your brand spanking new custom theme using my handy tutorial covering that topic (http://www.agaricdesign.com/note/theme-search-form-drupal-6)

Now you've noticed that when you click in the actual search field provided, the "search text here" which is the default value does not auto select. This means the user will have to delete the default value before they can enter their own search terms. This means nothing to most, but apparently if you are a perfectionist you just can't let it go.

Fear not! Thanks to jQuery, we can auto select that text, and easily too. All you have to do is create a js file with the code below and include it in your theme's info file.

if (Drupal.jsEnabled) {
    $(document).ready(function() {
       $('input[name=search_theme_form]').focus(function()
               {
                               $(this).select();
                      
               });
     });
  }

** the code above assumes your input field name is 'search_theme_form' (which it will be if you've made it using my other awesome tutorial on theming search)

That's it!, don't forget to clear cache, or resave your themes page.

Here's some more info:
Let's say this is the code being output for the search bar... well, at least the text field part of it

<input type="text" class="form-text cleardefault" value="search text here" size="15" id="edit-search-theme-form-1" name="search_theme_form" maxlength="128"/>

Now if you sit there for a really really long time and study the code snippets above, you will hopefully start to see the relation.


$('input[name=search_theme_form]')   calls   <input ...... name="search_theme_form">

and this concludes our lesson on using jQuery to auto select the default value of your search bar text.

now go do it! and know in your heart that the Agaric Way will always guide you.....

Resolution

Comments

This is the updated better version

This will select the text when you click anywhere inside the search box, AND it will select the text if you click on the text within the search box, definitely the way to go create a js file with the following code: Drupal.behaviors.exampletheme = function (context) { $('#search-box input[value]').focus(function() { $(this).select(); }); }; brought to you by the agaric night crew

Explanation of Selecting input field content

Hi Dan, thanks for doing this for drupal. I also would recommend read this article about selecting input field with jquery to users how would like to know more about the insights. It explains the details of the code, etc.

Just my 2 cents.

Post new comment

The content of this field is kept private and will not be shown publicly.
  • You may post code using <code>...</code> (generic) or <?php ... ?> (highlighted PHP) tags.
  • You can use Markdown syntax to format and style the text. Also see Markdown Extra for tables, footnotes, and more.
  • Web page addresses and e-mail addresses turn into links automatically.
  • Allowed HTML tags: <a> <em> <strong> <cite> <code> <ul> <ol> <li> <dl> <dt> <dd> <img> <blockquote> <small> <h2> <h3> <h4> <h5> <h6> <sub> <sup> <p> <br> <strike> <table> <tr> <td> <thead> <th> <tbody> <tt> <output>
  • Syntax highlight code surrounded by the {syntaxhighlighter SPEC}...{/syntaxhighlighter} tags, where SPEC is a Syntaxhighlighter options string or "class="OPTIONS" title="the title".
  • Lines and paragraphs break automatically.

More information about formatting options

By submitting this form, you accept the Mollom privacy policy.