我有几个文本框可以自动填充数据,我正在使用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('');
}
})
});