jQuery onfocus onblur问题

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

尝试设置 var var1 = null; 初始，然后当焦点触发时只需第一次设置它，如 var1 = var1 ?? $(this).val(); 看起来您每次都不断覆盖该值，也可能需要考虑将原始值存储为实际对象上的数据而不是全局变量

Answer 3

您使用的是单个 var1，但有多个文本框。因此，当您离开文本框时，var1 将会因您在另一个文本框中输入内容而受到重击。另外，在测试元素的值之前，您会先分配给 var1，因此 == 将始终为 true。

要“获取输入的原始值并将其存储在 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 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
});