javascript - 从文本输入中清除(和恢复)默认值

Question

我有一个文本框，其中写入了初始值，我希望该框在单击(事件)时清除。

例如: //希望在用户点击输入值时清晰可见

Answer 1

上述解决方案都不是很好 - 在这种情况下，内联事件不是一个好的解决方案。您需要的是使用 HTML5 placeholder 属性，并使用一些 Javascript，为不支持它的浏览器添加支持。您的 HTML 看起来像这样:

<input type="text" placeholder="Search" id="search" />

这适用于当前版本的 Safari 和 Chrome。对于其他浏览器，您可以使用此 Javascript:

// Creates a new element and check if it has the 'placeholder' property
// If it does not, then we know that the browser does not support HTML5 placeholder
if(typeof document.createElement('input').placeholder === 'undefined'){
    // Find the input element with the id "search" and get the 'placeholder' attribute
    var input = document.getElementById('search'), 
        p = input.getAttribute('placeholder');

    // Give it the placeholder value
    input.value = p;

    // Clear input on focus, then add the placeholder text 
    // back in if there's nothing there after the user changes edits the box
    input.onfocus = function(){
        if(this.value === p) this.value = '';
    }
    input.onblur = function(){
        if(!this.value) this.value = p;
    }
}

您可以在这里看到一个简单的演示:http://jsfiddle.net/RT8Bf/