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

更改元素';使用Javascript的onfocus处理程序?,javascript,onblur,onfocus,Javascript,Onblur,Onfocus,我有一个表单,它有一个默认值,描述应该进入字段的内容(替换标签)。当用户聚焦一个字段时,调用此函数: function clear_input(element) { element.value = ""; element.onfocus = null; } onfocus设置为null,这样,如果用户在字段中放入某个内容并决定对其进行更改,他们的输入不会被擦除(因此只擦除一次)。现在,如果用户在不输入任何数据的情况下转到下一个字段,则使用此函数(称为onblur)恢复默认值:

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

function clear_input(element)
{
    element.value = "";
    element.onfocus = null;
}
onfocus设置为null,这样,如果用户在字段中放入某个内容并决定对其进行更改,他们的输入不会被擦除(因此只擦除一次)。现在,如果用户在不输入任何数据的情况下转到下一个字段,则使用此函数(称为onblur)恢复默认值:

碰巧默认值是元素的名称,所以我没有添加ID,而是操纵了name属性。问题是,如果他们跳过了元素,那么onfocus事件将被clear_输入清空,但不会恢复

我补充说

element.onfocus = "javascript:clear_input(this);";
在restore_中使用默认函数,但这不起作用。我如何做到这一点?

使用

element.onfocus = clear_input;
或(带参数)


“javascript:”位是不必要的。

我建议您以稍微不同的方式处理它。与其清除该值,不如将其全部高亮显示,以便用户可以开始键入以覆盖它。然后,您不需要恢复默认值(尽管您仍然可以这样做,如果值为空,也可以采用相同的方式)。您还可以保留处理程序,因为文本没有清除,只是高亮显示。使用验证确保该值不是输入的原始值

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

看起来您不允许字段为空,但是如果用户在字段中放置一个或多个空格会怎么样?如果你想防止这种情况,你需要修剪它。(有关修剪的不同方式,请参见)

如果您确实想将字符串大写,可以使用:

function capitalize(str) {
    return str.substr(0, 1).toUpperCase() + str.substr(1).toLowerCase();
}
通过清除onfocus事件,您已经创建了一个不应该存在的问题。一个更简单的解决方案是只向onfocus事件添加一个if语句,这样它只会在它是您的默认值时清除(但我更喜欢像tvanfosson建议的那样选择它)

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

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


with Parameters示例正是我所需要的,我从来没有想到过这种语法。
function clear_input () {
    this.value = "";
    this.onfocus = null;
}
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);
    }
}
function trim(str) {
    return str.replace(/^\s\s*/, '').replace(/\s\s*$/, '');
}
function capitalize(str) {
    return str.substr(0, 1).toUpperCase() + str.substr(1).toLowerCase();
}
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;}
}
<!-- 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>