5

我有一个具有默认值的表单，它描述了应该进入该字段的内容（替换标签）。当用户聚焦一个领域时，这个函数被调用：

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

碰巧默认值是元素的名称，所以我没有添加 ID，而是操作了 name 属性。问题是，如果他们确实跳过了元素，那么 onfocus 事件会被 clear_input 取消，但永远不会恢复。

我添加了

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

在 restore_default 函数中，但这不起作用。我该怎么做呢？

4

4 回答 4

7

利用

element.onfocus = clear_input;

或（带参数）

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

和

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

“javascript:”位是不必要的。

于 2008-11-15T18:21:36.027 回答
1

看起来您不允许字段为空，但是如果用户在字段中放置一个或多个空格怎么办？如果你想防止这种情况，你需要修剪它。（有关修剪的不同方法，请参阅Steven Levithans 博客）。

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 建议的那样选择它）。

我假设您在输入元素上设置了值属性，以便在显示页面时在输入元素中显示一个值，即使禁用了 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;}
}
于 2008-11-15T19:52:37.887 回答
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);
    }
}
于 2008-11-15T18:33:52.337 回答
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>
于 2009-11-19T14:30:08.017 回答