0

検索する単語を入力し、その横にあるボタンをクリックするためのテキストボックスがあります。

<input id="EnterText" class="lightcolor" type="text" size="50" value="Enter text" maxlength="50" name="EnterText">
<input id="ClickButton" type="image" value="Button" name="ClickButton" onclick="" src="">

私はフロントエンドから来たので、優れたユーザー エクスペリエンス デザインを考えEnter text、フォーカス イベントが発生したときにクラスを変更し、ぼかしイベントが発生したときに戻ってくる明るい色のテキストを入力しました。したがって、私はそれのためにjQueryを書きました。

$(document).ready(function () {
    $('#EnterText').focusin(function () {
        alert("focus in");
        var res = document.getElementById("EnterText");
        document.getElementById("EnterText").value = "";
        res.setAttribute("class", "afterClick");
    });
    $('#EnterText').focusout(function () {
        alert("focus out");
        var res = document.getElementById("EnterText");
        document.getElementById("EnterText").value = "Enter Text";
        res.setAttribute("class", "lightcolor");
    });
    $('ClickButton').click(function () {
        alert("Click Button")
    });
});

ご覧のとおり、 、 、 を試してみましたfocusinがfocus、blurボタンをクリックした瞬間にイベントがトリガーfocusoutされるため、必要なことができませんでした。focusout実際、ClickButtonnever のアラートは表示されません。このため、これを実装することができずfocusout、focusin私のアイデアが要件になりました。また、テキストボックスのフォーカスアウトイベントをクリックすると、最初に呼び出されてからフォーカスインされることにも気付きました。必要なのは、ユーザーをガイドするコンテンツを含むテキストボックスだけであり、ユーザーがクリックすると値を入力してクリックしますこの値を取得した後、バックエンドの人々が残りを処理できるように、そのボタン。

4

2 に答える 2

3

これは、jQuery とはるかに優れたコードを使用して簡単に行うことができます。

これをチェックしてください： http://jsfiddle.net/webtiago/7BAyV/

于 2011-12-10T15:11:59.253 に答える
1

不要なJavaScriptの代わりにプレースホルダー属性の使用を検討する必要があります。

例：

http://jsfiddle.net/FdKYW/1/

于 2011-12-10T09:48:11.660 に答える