-1

フォームのインスタンスが複数あるページがあります。各フォームには、他のフィールドの中でも次のフィールドがあります。

<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 初心者なので... ;)

4

1 に答える 1

-1

この件に関する Quirksmode の記事を読んだ後、問題はまさにそこで説明されていたものであることに気付きました。関数がコピーではなく参照されていたのです。私が集めたものから、インライン JS を 1 つのページで複数のインスタンスに対して望んでいたように動作させることは不可能です。

私の解決策は、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>

もっと合理化できると確信していますが、できるだけ早く回答を投稿したかったのです。後で合理化されたソリューションで更新する可能性があります。

于 2013-07-10T13:00:35.250 に答える