Unable to pass string in to jquery function

Question

I wish to grab the current value of a search input and then clear the input box on focus, store the string and pass it into a function to re-populate the input box on blur.

$("input#search").bind('focus', function() {
    var search_text = document.getElementById('search').value;
    $("input#search").val("");
}).bind('blur', function(search_text) {
    $("input#search").val(search_text);
});

Currently, this successfully grabs the value on focus and clears the input box, but on blur, it populates the input with [object Object].

Am I correctly passing the string on line 4?

Rory McCrossan · Accepted Answer · 2016-11-17 09:14:12Z

2

Firstly, don't use bind(). It was deprecated a long time ago. Use on() instead.

With regard to your issue, you can't directly pass a parameter to the anonymous handler function in the manner you're attempting. As it stands your search_text variable will hold the blur event.

To fix this you could store the variable in a data attribute on the #search element itself. Try this:

$("input#search").on('focus', function() {
  $(this).data('search-text', this.value).val('');
}).on('blur', function(search_text) {
  $(this).val($(this).data('search-text'));
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="search" value="foo bar" />

Also, the behaviour you're creating here is similar to the placeholder attribute. It may be worth investigating that to see if it meets your needs.

answered Nov 17, 2016 at 9:14

Rory McCrossan

338k41 gold badges321 silver badges353 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

ScanQR · Accepted Answer · 2016-11-17 09:16:36Z

0

Use .on() of jQuery to register event.

var search_text;
$("input#search").on('focus', function() {
   search_text = document.getElementById('search').value;
   $("input#search").val("");
});

$("input#search").on('blur', function() {
   $("input#search").val(search_text);
});

Alternate could be ,

$("input#search").on('focus', function() {
   var search_text = document.getElementById('search').value;
   $("input#search").val("");

   $(this).on('blur', function() {
     $("input#search").val(search_text);
   });
});

edited Nov 17, 2016 at 9:16

answered Nov 17, 2016 at 9:13

ScanQR

3,8202 gold badges16 silver badges34 bronze badges

1 Comment

Rory McCrossan Over a year ago

While this may work, I'd suggest avoiding global variables where possible.

user2345 · Accepted Answer · 2016-11-17 09:16:37Z

0

No. Here is how you would do, declaring the variable before the event listeners so that it's in the scope:

var search_text;
$("input#search").bind('focus', function() {
    search_text = document.getElementById('search').value;
   $("input#search").val("");
}).bind('blur', function() {
   $("input#search").val(search_text);
});

The convention in JavaScript for naming variables in Camel Case, so you would rather use searchText (not that it really matters).

answered Nov 17, 2016 at 9:16

user2345

3,2271 gold badge24 silver badges44 bronze badges

1 Comment

user2345 Over a year ago

Though this still has a global variable

Collectives™ on Stack Overflow

Unable to pass string in to jquery function

3 Answers 3

Comments

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related