javascript - 使用 JavaScript 清除输入字段

Question

过去几个小时我一直在研究这个，但无法真正实现我想要的目标。我目前有以下两个输入:

<input type="text" id="username" value="USERNAME" onfocus="inputFocused(this)" onblur="inputBlurred(this)" />
<input type="password" id="password" value="PASSWORD" onfocus="inputFocused(this)" onblur="inputBlurred(this)" />

最初，输入文本是灰色的，我有以下 JavaScript 函数 onfocus 和 onblur:

var defaultInput = "";

function inputFocused(obj){
    defaultInput = obj.value;   
    obj.value = "";
    obj.style.color = "#000";
}

function inputBlurred(obj){
    if(obj.value == ""){
        obj.style.color = "#AAA";
        obj.value = defaultInput;
    }
}

我正在尝试设计一种方法，以便一旦我开始在字段中输入内容，离开该字段，然后返回，它就不会再次清除输入(因为它将包含用户在其中输入的内容)。我想过用某种变量来实现这一点，我可以根据状态在 1 和 0 之间交替，但这看起来很草率。非常感谢这位 JS 新手的任何见解。

Answer 1

在inputFocused中，无论任何状态，您都会清除输入字段的值。也许我误解了你的意图，但是为什么你会在集中控制时放弃该值？

更新:向每个元素添加“defaultTextValue”属性允许您在第一个焦点事件上捕获输入的默认值。另一种方法是使用文档的 onLoad 事件来捕获默认值。下面的代码片段会在文本框聚焦时清除它们，并且它们的值与初始化时的默认值相同。您可能会惹恼用户名为“username”或密码为“password”的用户，但您可能无论如何都应该这么做 8-)

function inputFocused(obj) {

    if (obj.defaultTextValue == undefined || obj.value == obj.defaultTextValue) {
        obj.defaultTextValue = obj.value;   
        obj.value = "";
    }
}

function inputBlurred(obj) {

    if (obj.value == "" && obj.defaultTextValue != undefined) {
        obj.value = obj.defaultTextValue;
    }
}