Question

我在让onFocus和onBlur事件正常工作时遇到了一些麻烦

这是我得到的

var var1

$("input").focus(function() {

  var1 = $(this).val()

if ( $(this).val()==var1) {
       $(this).val('').css({'color': "#000", 'font-style': 'normal', 'font-weight': 'bold'});
   }  
    $(this).css({'background-color':'#d7df23' });    
});

$("input").blur(function() {
   if ( $(this).attr("value")=="") {
       $(this).val(var1).css({'color': "#666", 'font-style': 'italic', 'font-weight': 'normal'});
   }   
    $(this).css({'background-color':'#EEEEEE' });      
});

这是我的HTML

<input type="text" id="tbTitle" value="Title">

<input type="text" id="tbTitle1" value="Title1">

<input type="text" id="tbTitle2" value="Title2">

如果您不更改文本框的值，则此方法有效。

基本上我想获取输入的原始值并将其存储在var中，然后如果该字段为空，则将原始值恢复。

目前正在将文本框中任何内容的值放在焦点上

有没有办法存储原始值，只能将其更改为onBlur？

以下是我jsfiddle

的链接

Answer 1

这是我的解决方案......

http://jsfiddle.net/Sohnee/YTTD5/4/

或代码......

var originalValues = new Array();

$("input").focus(function() {

    if (!originalValues[this.id]) {
      originalValues[this.id] = $(this).val()
    }

    if ( $(this).val()==originalValues[this.id]) {
           $(this).val('').css({'color': "#000", 'font-style': 'normal', 'font-weight': 'bold'});
       }  
        $(this).css({'background-color':'#d7df23' });    
   });

    $("input").blur(function() {
       if ( $(this).attr("value")=="") {
           $(this).val(originalValues[this.id]).css({'color': "#666", 'font-style': 'italic', 'font-weight': 'normal'});
       }   
        $(this).css({'background-color':'#EEEEEE' });      
   });

Answer 2

您使用的是单个var1，但有多个文本框。因此，当您离开文本框时，您将通过输入另一个文本框来阻止var1。此外，在您针对它测试元素的值之前，您将分配给var1，因此==将始终为真。

要“获取输入的原始值并将其存储在var中，然后如果该字段为空，则将原始值恢复”，您可以执行以下操作：

var values = {};

$("input").focus(function() {

    var $this = $(this);

    // Save the value on focus
    values[this.id] = $this.val();

}).blur(function() {

    var $this = $(this);

    // Restore it on blur
    if ($this.val() == "") {
        $this.val(values[this.id]);
    }

});

我遗漏了上面的CSS内容，因为我不太清楚你想用它做什么。添加回来很容易。

Answer 3

尝试初始设置var var1 = null;，然后当焦点触发器刚刚第一次像var1 = var1 ?? $(this).val();那样设置它时，你看起来每次都会超过这个值，也可能想要考虑storring原始值作为实际对象的数据而不是全局变量

Answer 4

没有CS的东西..如果我们在'rel'属性中输入一个值为该值的字段。在字段退出时，如果值为空，则复制rel属性中的任何内容，这可能是空的，或者是初始焦点上存在的值。

$("input").focus(function() {
 if($(this).val()!=''){
  $(this).attr('rel',$(this).val());
 }
});

$("input").blur(function() {
 if($(this).val()==''){
  $(this).val($(this).attr('rel'));
 }
});

Answer 5

问题在于您在焦点时存储输入值，而不是在初始设置时存储输入值。这段代码可能很有用：

var initials ={};
$(document).ready(function(){
  $('input').each(function(){
    initials[this.id] = $(this).attr('value');
  });
});

$('input').focus(function(){
  // do whatever you want to
});

$('input').blur(function(){
  if($(this).attr('value')==''){
    $(this).attr('value', initials[this.id]);
  }
  // do other stuff
});

jQuery onfocus onblur问题

5 个答案: