jQuery - 如果为空,则将输入值设置为blur上的先前值

时间:2013-07-10 11:13:31

标签: jquery blur

我已经花了几个小时在这上面,找不到任何帮助,所以已经抛弃了。我只是尝试恢复输入框的先前值,如果用户将其清除,并在输入失去焦点时不留下任何内容。例如,如果它在我的输入框中显示“Brisbane,Australia”,并且用户从输入中删除该文本然后按Tab键,我希望它将输入还原为“澳大利亚布里斯班”。这是我的代码:

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

$('input#search-location').on("blur", function() {
  if ($(this).val() == "") {
    // alert($(this).data("previous-value"));
    $(this).val($(this).data("previous-value"));
  }
}); 

两个事件都会触发,如果我取消注释模糊功能中的警报,它会正确显示之前的值。但是输入框中没有任何内容,控制台中没有错误。我想这是愚蠢的我错过了...我感谢任何帮助!

1 个答案:

答案 0 :(得分:4)

您的代码应该可以正常运行Live Demo

请注意,您需要在呈现页面元素后执行代码,因此需要将代码包装在

$(function() { ... });

如果您想将其设置为加载页面时的默认值,请尝试

Live Demo

$('input#search-location').on("blur", function() {
  if ($(this).val() == "") {
    $(this).val(this.defaultValue);
  }
});

较新的浏览器会在此处提示:

<input placeholder="Type your name" />

您可以帮助旧浏览器支持它

$(function() {
  if (!placeholderIsSupported) {
    $('#search-location1')
    .val($('#search-location1').attr("placeholder"))
    .on("blur", function() {
      if ($(this).val() == "") {
        $(this).val($(this).attr("placeholder"));
      }
    })
    .on("focus",function() {
      if ($(this).val()==$(this).attr("placeholder")) $(this).val("");
    });
  }  
});

function placeholderIsSupported() {
 var test = document.createElement('input');
 return ('placeholder' in test);
}