0

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

例如：标准输入为“ADDRESS”的文本框将自动填充“ABC123”，然后清除焦点。如果文本框为空，则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); };

};

4

3 回答 3

1

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

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

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

于 2013-10-02T18:46:12.470 回答
0

似乎您想做一些类似于水印的事情。您可以以更简单的方式实现它。尝试这个。

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';
    }
}
于 2013-10-02T18:57:20.447 回答
0

理想情况下，您将只使用该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('');
        }
    })
});
于 2013-10-02T19:13:59.730 回答