Question

我有一个文本字段，占位符文本为“名字”，因此当用户点击该字段时文本消失，允许他输入文本

HTML

  <input class="fname" type="text" placeholder="First Name"/>

JS

function placeHolderFallBack() {
if("placeholder" in document.createElement("input")) {  
    return;     //In chrome it comes here
}else { 
    // works fine in IE8,FF 
    }

所以基本上上面的代码在chrome中没有用，有什么想法吗？

Answer 1

在chrome和safari中，占位符属性适用于keyup。当您开始输入时它会消失。

如果确实需要，请尝试这种方法

DEMO - http://jsfiddle.net/NL2Dr/2/

var ttext;

$('input').focus(function(){
    ttext = $(this).attr('placeholder');            
    $(this).removeAttr('placeholder');
});
$('input').blur(function(){
    $(this).attr('placeholder', ttext);
});

Answer 2

感谢Dipaks，但是当您选择其中一个输入时停用然后重新激活Chrome时它不起作用。此外，我认为它需要一点性能提升。这是修订版：

$('input:text, textarea').each(function(){
    var $this = $(this);
    $this.data('placeholder', $this.attr('placeholder'))
         .focus(function(){$this.removeAttr('placeholder');})
         .blur(function(){$this.attr('placeholder', $this.data('placeholder'));});
});

chrome中的占位符文本回退事件问题

2 个答案: