用Javascript更改元素的onfocus处理程序?

时间:2008-11-15 18:10:39

标签: javascript onblur onfocus

我有一个表单,其默认值描述应该进入字段的内容(替换标签)。当用户聚焦字段时,会调用此函数:

function clear_input(element)
{
    element.value = "";
    element.onfocus = null;
}

onfocus设置为null,这样如果用户在字段中放入某些内容并决定更改它,则不会删除它们的输入(因此它只会擦除一次)。现在,如果用户移动到下一个字段而不输入任何数据,则使用此函数恢复默认值(称为onblur):

function restore_default(element)
{
    if(element.value == '')
    {
        element.value = element.name.substring(0, 1).toUpperCase()
                          + element.name.substring(1, element.name.length);
    }
}

事实上,默认值是元素的名称,因此我只是操纵了name属性,而不是添加ID。问题是,如果他们跳过元素,那么使用clear_input使onfocus事件无效,但从未恢复。

我添加了

element.onfocus = "javascript:clear_input(this);";

在restore_default函数中,但不起作用。我该怎么做?

4 个答案:

答案 0 :(得分:7)

使用

element.onfocus = clear_input;

或(带参数)

element.onfocus = function () { 
    clear_input( param, param2 ); 
};

function clear_input () {
    this.value = "";
    this.onfocus = null;
}

“javascript:”位是不必要的。

答案 1 :(得分:1)

看起来你不允许字段为空,但是如果用户在字段中放置一个或多个空格怎么办?如果你想阻止它,你需要修剪它。 (有关不同的修剪方法,请参阅Steven Levithans blog。)

function trim(str) {
    return str.replace(/^\s\s*/, '').replace(/\s\s*$/, '');
}

如果你真的想要大写你可以使用的字符串:

function capitalize(str) {
    return str.substr(0, 1).toUpperCase() + str.substr(1).toLowerCase();
}

通过清除onfocus事件,您已经创建了一个不应该存在的问题。一个更简单的解决方案是只在onfocus事件中添加一个if语句,因此只有当它是你的默认值时它才会被清除(但我更喜欢像tvanfosson建议的那样选择它)。

我假设你在input元素上设置了value-property,这样当显示页面时,即使禁用了javascript,输入元素中也会显示一个值。该值可用作element.defaultValue。使用这种方法的奖金:

  • 您只能在一个地方定义默认值。
  • 您不再需要将处理程序中的任何值大写。
  • 默认值可以是任何情况(例如“John Y McMain”)
  • 默认值不再需要与元素名称相同。

function clear_default(element) {
    if (trim(element.value) == element.defaultValue ) { element.value = ""; }
}

function restore_default(element) {
    if (!trim(element.value).length) { element.value = element.defaultValue;}
}

答案 2 :(得分:0)

我建议你稍微改变一下。而不是清除值,为什么不只是突出显示它,以便用户可以开始键入以覆盖它。然后您不需要恢复默认值(尽管如果值为空,您仍然可以这样做并以相同的方式)。您也可以将处理程序保留在原位,因为文本未被清除,只是突出显示。使用验证来确保该值不是输入的原始值。

function hightlight_input(element) {
    element.select();
}

function restore_default(element) // optional, do we restore if the user deletes?
{
    if(element.value == '')
    {
        element.value = element.name.substring(0, 1).toUpperCase()
                          + element.name.substring(1, element.name.length);
    }
}

答案 3 :(得分:0)

<!-- JavaScript
function checkClear(A,B){if(arguments[2]){A=arguments[1];B=arguments[2]} if(A.value==B){A.value=""} else if(A.value==""){A.value="Search"}}
//-->

<form method="post" action="search.php">
<input type="submit" name="1">
<input type="text" name="srh" Value="Search" onfocus="checkClear(this,'Search')" onblur="checkClear(this,' ')">
</form>