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)" />

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

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;
    }
}

Answer 2

添加到jscharf的代码，您可以使用输入字段的title属性来存储每个输入的默认值。这具有以下可用性优势：让人们知道输入字段悬停在输入字段时应包含的内容：

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

在js：

function inputFocused(obj){
   if(obj.title != obj.value){
      obj.value = '';
      obj.style.color = '#000';
   }
}

function inputBlurred(obj){
   if(obj.value == '' || obj.title == obj.value){
      obj.value = obj.title;
      obj.style.color = '#AAA';
   }
}

另外，不确定你是否考虑过这样做，但如果你愿意，可以在CSS中控制输入的焦点颜色（当然不能在IE6中工作......但是你只能在IE6中覆盖它样式表）：

input {
   color: #AAA;
}


input:focus {
   color: #000;
}

Answer 3

您可以根据需要将任何自定义属性添加到HTML页面的DOM中，从而为您提供很大的灵活性。

Answer 4

您可以检查当前字段中的值是否为初始值。

使用JavaScript清除输入字段

4 个答案: