无法将字符串传递给jquery函数答案

【问题标题】：Unable to pass string in to jquery function无法将字符串传递给jquery函数
【发布时间】：2016-11-17 09:10:05
【问题描述】：

我希望获取搜索输入的当前值，然后清除焦点上的输入框，存储字符串并将其传递给函数以在模糊时重新填充输入框。

$("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);
});

目前，这成功地获取了焦点上的值并清除了输入框，但在模糊时，它会使用[object Object] 填充输入。

我是否正确地传递了第 4 行的字符串？

【问题讨论】：

标签： javascript jquery

【解决方案1】：

首先，不要使用bind()。很久前它已被弃用。请改用on()。

关于您的问题，您无法以您尝试的方式直接将参数传递给匿名处理函数。就目前而言，您的 search_text 变量将保存 blur 事件。

要解决此问题，您可以将变量存储在 #search 元素本身的 data 属性中。试试这个：

$("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" />

此外，您在此处创建的行为类似于placeholder 属性。可能值得调查一下，看看它是否满足您的需求。

【讨论】：

【解决方案2】：

使用jQuery的.on()注册事件。

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);
});

也可以是，

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

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

【讨论】：

虽然这可能有效，但我建议尽可能避免使用全局变量。

【解决方案3】：

没有。以下是您的做法，在事件侦听器之前声明变量，使其在范围内：

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);
});

JavaScript 中以 Camel Case 命名变量的约定，因此您宁愿使用 searchText（这并不重要）。

【讨论】：

虽然这还是有一个全局变量