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

Placeholder text fallback event issue in chrome

本文关键字：回退 事件 问题 文本 占位符      更新时间：2023-09-26

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

.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 中不起作用，有什么想法吗？

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

仍然如果真的需要尝试这种方法

演示 - http://jsfiddle.net/NL2Dr/2/

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

感谢 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'));});
});
相关文章：