Javascript:以编程方式更改焦点函数

Javascript: programmatically change onfocus function

本文关键字：焦点 函数 方式更 编程 Javascript      更新时间：2023-09-26

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

例如：标准输入为"地址"的文本框将自动填充"ABC123"，然后清除对焦。如果文本框保持为空，则在模糊中，它将返回到"地址"

这类似于使用 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中返回对焦更改，它将元素的对焦设置为正确的功能并正常工作！在下面编辑：

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

};

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

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

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

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

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

理想情况下，您只需使用 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('');
        }
    })
});
相关文章：