Question

我有几个可以自动填充数据的文本框，我使用javascript函数清除文本框一次，然后恢复为仅在输入特定文本时清除的javascript函数。

例如：标准输入为“ADDRESS”的文本框将自动填充“ABC123”，然后清除onfocus。如果文本框保持为空，则为onblur，它将返回“ADDRESS”

这类似于Change an element's onfocus handler with Javascript?的问题，但我无法让它发挥作用。有什么建议吗？

我的文本框只是ASP.NET文本框，onfocus / onblur事件在后面的代码中设置：

<asp:TextBox ID="txtAddress" Text="ADDRESS" runat="server" CssClass="txtboxwrong" />

代码背后：

txtAddress.Attributes.Add("onFocus", "clearOnce(this,'ADDRESS');")
txtAddress.Attributes.Add("onBlur", "restoreText(this,'ADDRESS');")

我的javascript如下：

function clearText(obj, deftext, defclass, defvalue) {
    if (obj.value == deftext) {
        if (!defvalue) { defvalue = '' }
        obj.value = defvalue;
        if (!defclass) { defclass = 'txtbox' }
        obj.className = defclass;
    }
};

function restoreText(obj, deftext, defclass, defvalue) {
    if (!defvalue) { defvalue = '' }
    if (obj.value == defvalue || obj.value == '')  {
        obj.value = deftext;
        if (!defclass) { defclass = 'txtboxwrong' }
        obj.className = defclass;
    }
};

function clearOnce(obj, deftext) {
    obj.value = '';
    obj.className = 'txtbox';
    obj.onfocus = function () { clearText(obj, deftext); };
};

编辑：

感谢@rescuecreative，我修复了探测器。通过在clearOnce中返回onfocus更改，它将元素的onfocus设置为正确的功能并正常工作！编辑如下：

function clearOnce(obj, deftext) {
obj.value = '';
obj.className = 'txtbox';
return function () { clearText(obj, deftext); };

};

Answer 1

你的asp文本框可以使用占位符属性吗？在html5中，占位符属性会自动创建您正在寻找的确切功能。

<input type="text" placeholder="ADDRESS" />

上面的文本字段将显示单词“ADDRESS”，直到集中在哪一点它将清空并允许用户键入。如果用户离开该字段并且它仍为空，则占位符重新出现。如果您不能依赖html5，那么JavaScript plugin会在不支持html5的浏览器中创建该功能。

Answer 2

看起来你想做类似水印的事情。你可以用更简单的方式实现它。试试这个。

function clearOnce(obj, deftext) {
    if(obj.value == deftext) {
        obj.value = '';
        obj.className = 'txtbox';
    }
}

function restoreText(obj, deftext) {
    if(obj.value == '') {
        obj.value = deftext;
        obj.className = 'txtboxwrong';
    }
}

Answer 3

理想情况下，您只需使用placeholder属性，但旧浏览器可能不支持此属性。如果你可以使用jQuery，这样的东西对你有用：

$('[placeholder]').focus(function() {
    var input = $(this);
    if (input.val() == input.attr('placeholder')) {
        input.val('');
        input.removeClass('placeholder');
    }
}).blur(function() {
    var input = $(this);
    if (input.val() == '' || input.val() == input.attr('placeholder')) {
        input.addClass('placeholder');
        input.val(input.attr('placeholder'));
    }
}).blur();

如果没有输入任何内容，下面的代码将确保不会使用表单提交占位符文本：

$('[placeholder]').parents('form').submit(function() {
    $(this).find('[placeholder]').each(function() {
        var input = $(this);
        if (input.val() == input.attr('placeholder')) {
            input.val('');
        }
    })
});

Javascript：以编程方式更改onfocus功能

3 个答案: