javascript中的Onclick属性操作

Onclick attribute manipulation in javascript?

本文关键字：操作 属性 Onclick 中的 javascript      更新时间：2023-09-26

我有一个输入字段，其中有一些预定义的文本解释它的用途。如果用户单击，它应该是空白的，以便用户可以写他/她自己的。但是，如果用户已经输入了自定义文本，并且由于某种原因再次单击该字段，则不应该发生这种情况。

第一部分有效，第二部分无效。我需要如何调整这个代码?

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

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

使用onfocus和onblur代替:)

您可能想要onfocus，请看下面的示例:

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

如果当前焦点上的值为"Name"，则设置该值为空

如果blur的当前值没有值，设置为Name

一个更好的方法是将自动清除设置为一个函数，这样你就不必每次都重新输入了:

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'));

一个工作的jsFiddle

如前所述，你应该在支持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>

将字符串"true"answers"false"转换为bool有问题。

看这个小提琴。显然在JS中:

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

我是这样做的:

firstclick='1' value="Antwort verfassen..." 
onfocus="if(this.getAttribute('firstclick')) {
    this.value='';this.removeAttribute('firstclick');
};"
相关文章：