Question

我有一个包含多个表单实例的页面。除其他字段外，每个表单都包含以下字段：

<input class="span1" type="text" name="abc" id="abc" value="25" placeholder="25"
       onfocus="if (this.value==this.defaultValue) this.value=''; else this.select()"
       onblur="if (!this.value) this.value=this.defaultValue">

问题在于，当我点击上述字段的任何实例时，焦点将放到第一次出现的字段中。 this.select不限于该特定元素。如何确保每个字段的JS都以该字段为目标进行操作？

我很确定这是一个基本的JS新问题，但因为我是JS新手......;）

Answer 1

在阅读了关于这个主题的Quirksmode article之后，我意识到这个问题正是那里所描述的 - 这个函数被引用而不是复制。从我收集到的内容来看，不可能像单个页面上的多个实例一样使用内联JS工作。

我的解决方案是从HTML标记中提取JS并将其转换为函数。我使用了一些jQuery（因为jQuery！）。：P

这是HTML：

<input
class="span1 hasDefaultValue"
type="text"
name="abc"
value="25"
placeholder="25">

和JS：

<script type="text/javascript">
function fieldFocus()
{
    if (this.value==this.defaultValue)
    {
        this.value='';
    }
    else
    {
        this.select();
    }
}
function fieldBlur()
{
    if (!this.value)
    {
        this.value=this.defaultValue;
    }
}

$(document).ready(function() {
    $("input.hasDefaultValue").click(fieldFocus);
    $("input.hasDefaultValue").blur(fieldBlur);
});
</script>

我确信可以更精简，但我想尽快发布答案。我稍后可能会使用简化的解决方案进行更新。

内联“this.select”Javascript的多个元素;只有第一个被选中

1 个答案: