Question

我创建了一段没有典型外观（边框）的文本输入。所有都有占位符属性。当用户将鼠标悬停在每个输入上时，我希望更改占位符文本。一旦他们离开输入区域，我希望重新添加原始占位符文本。我已经成功地在悬停时获取备用占位符文本，并且我尝试使用数据方法重新添加原始占位符文本

标记：

<input type="text" class="inline-edit" placeholder="Id Number" data-ph="Id Number">
<input type="text" class="inline-edit" placeholder="First Name" data-ph="First Name">
<input type="text" class="inline-edit" placeholder="Last Name" data-ph="Last Name">
Etc..

Jquery的：

$(function(){
  $('.inline-edit').mouseover(function(){
    $(this).attr('placeholder', 'edit');
  });
  $('.inline-edit').mouseout(function(){
    var holder = $('.inline-edit').data('ph');
    $(this).attr('placeholder', holder);
  });
})

正在发生的事情是，jquery正在抓取第一个数据属性（data-ph =“Id Number”）并用所有输入的值替换占位符文本。

悬停后标记：

<input type="text" class="inline-edit" placeholder="Id Number" data-ph="Id Number">
<input type="text" class="inline-edit" placeholder="Id Number" data-ph="First Name">
<input type="text" class="inline-edit" placeholder="Id Number" data-ph="Last Name">
Etc..

我进行了广泛的搜索，除了更改焦点上的文字外，我找不到类似的情况。根据我的理解，模糊方法不会帮助我完成这项任务。我希望我对这个问题的解释清楚，并提前感谢你。

Answer 1

问题出在您的holder变量上。它可能会这样工作：

var holder = $(this).data('ph');

<强>更新

或者您可以执行以下操作：

$(function(){
  $('.inline-edit').mouseover(function(){
    //gets the current placeholder
    this.holder=$(this).attr('placeholder');
    $(this).attr('placeholder', 'edit');
  });
  $('.inline-edit').mouseout(function(){
    $(this).attr('placeholder', this.holder); //sets it back to the initial value
  });
})

无需使用其他内联属性。

重要为了避免进一步的问题，请考虑使用$.focus()和$.blur()

Jquery：在悬停时更改占位符文本，在悬停后添加原始文本

1 个答案: