Question

我有一个输入字段，其中包含一些预先定义的文本，说明它的用途。如果用户点击它应该变为空白，以便用户可以自己编写。但是，如果用户已输入自定义文本并且由于某种原因再次单击该字段，则不会发生这种情况。

第一部分有效，第二部分没有。我该如何调整此代码？

 <input type="text" value="Write something..." firstclick=true
 onclick="if(this.getAttribute('firstclick')) {
 this.value='';this.setAttribute('firstclick',false);} ;"/>

Answer 1

您可能需要onfocus，请查看此示例：

<input type="text" value="Name"
    onfocus="if(this.value === 'Name'){this.value = ''}" 
    onblur="if(this.value === ''){ this.value = 'Name'}" >

如果焦点上的当前值具有值“名称”，则将值设置为空

如果模糊的当前值没有值，请将其设置为“名称”

更好的方法是使autoclear成为一个函数，这样你就不必每次都重新键入它：

function autoClearField(domElement)
{
    var defaultValue = domElement.value;
    domElement.onfocus = function()
    {
        if(this.value === defaultValue)
        {
            this.value = '';
        }
    }

    domElement.onblur = function()
    {
        if(this.value === '')
        { 
            this.value = defaultValue;
        }
    }
}

对于您使用的HTML：

<input id='name' type="text" value="Name" >

调用这样的函数会设置autoclear：

autoClearField(document.getElementById('name'));

A working jsFiddle

Answer 2

<input type="text" value="Write something..." 
onfocus="if(this.value=='Write something...'){ this.value='';}" 
onblur="if(this.value==''){this.value='Write something...';}">

使用onfocus和onblur代替：）

Answer 3

如前所述，您应该将html5占位符属性与支持它的浏览器一起使用。

<input type="text" id="name" />

<script>
function addPlaceHolder(elt, defaultText) {
    if("placeholder" in document.createElement("input"))
        elt.placeholder = defaultText;
    else 
    {
        var defaultValue = defaultText;
        elt.value = defaultText;
        elt.onfocus = function()
        {
            if(this.value === defaultValue)
            {
                this.value = '';
            }       
        }
        elt.onblur = function()
        {
            if(this.value === '')
            { 
                this.value = defaultValue;
            }
        }
    }
}
addPlaceHolder(document.getElementById('name'), 'defaultText');
</script>

Answer 4

将bozo字符串“true”和“false”强制转换为问题。

观看this fiddle。显然在JS：

Boolean("false");  // == true
!! "false";        // == true

Answer 5

我很喜欢这样做：

firstclick='1' value="Antwort verfassen..." 
onfocus="if(this.getAttribute('firstclick')) {
    this.value='';this.removeAttribute('firstclick');
};"

在javascript中的onclick属性操作？

5 个答案: