3

「値をクリア」ボタンを使用してフォームフィールドを作成しています。iOSのように、タップして検索文字列をクリアできる小さな「X」アイコンがあります。

私の問題は次のとおりです。フィールドのblurイベントを使用して入力形式のエラーチェックを実行し、「X」アイコンの実装は常にblurイベントをトリガーします。

私は困惑しています。入力フィールドに背景画像としてアイコンを配置すると、クリックターゲットがなくなり、フィールドの上に標準のdivまたはimgを重ねて使用すると、もちろんぼかしがトリガーされます。

jQueryを使用していますが、これは一般的なCSS/javascriptの問題である可能性があります。

たとえば、ここで受け入れられている解決策：入力テキスト内のアイコンをクリアします。 これは元の意図の良い例ですが、これを添付するとすぐにぼかしイベントもトリガーされます。

更新： エラーチェック機能を使用するのが最善の方法のようですが、それが気に入らないので探し続けました... contenteditableHTML5の属性に気づいていなかったことがわかりました。

フォームデータにフォームフィールドを使用しないこと、およびHTML5を実行できない昔ながらのブラウザーを忘れることに関する明らかなアクセシビリティの懸念は別として、contenteditable divタグを使用して入力フィールドを再作成しない理由は何ですか？

4

4 に答える 4

5

ぼかしイベントを回避しようとする代わりに、このケース（Xクリック）を入力検証関数から除外してみませんか？これを行うにはいくつかの方法があります。たとえば、ホバー時var doExcludeにtrueに設定できます。検証関数では、blurイベントが発生すると、関数の残りの部分の前に最初にこれをチェックできます。

if (exclude) return;

Xが完了したら、必要に応じてフォーカスを入力に戻すことができます$('input').focus();

于 2013-03-25T18:07:20.787 に答える
1

ここに多くのオプション

  • 「keyup」で検証するようにトリガーを変更するか、「submit」でエラーをチェックすることができます
  • jquery検証プラグインを使用する
  • で、$('#X-icon').click(fn)エラーメッセージをクリア/非表示にすることもできます。そのため、ユーザーにはエラーメッセージは表示されません。
于 2013-03-25T18:06:01.243 に答える
1

ハッキーで好ましくないかもしれないことはsetTimeout、blurイベントで使用することです。これにより、コードの実行を100ミリ秒（またはどれだけ長く）遅らせることができます。100ミリ秒以内に、「クリア」ボタンがクリックされているはずです。そうでない場合は、通常のエラーチェック/フォーマットを実行します。blurクリックされた場合は、入力のテキストをクリアし、通常のイベントを実行しないでください。

投稿したリンクのスタイルを使用した例を次に示します（入力テキスト内のアイコンをクリアします）。

$(document).ready(function() {
    var clearTextTimeout;

    $("#data_field").on("blur", function () {
        var $that = $(this);
        clearTextTimeout = setTimeout(function () {
            console.log("would be error checking and formatting text");            
        }, 100);
    });

    $("#data_field_clear").on("click", function () {
        clearTimeout(clearTextTimeout);
        console.log("clearing text");
        $("#data_field").val("");
    });
});

http://jsfiddle.net/37Pxw/

ブラウザのコンソールを見ると、「クリア」ボタンをクリックしない場合にのみエラーチェック/フォーマットが実行されることがわかります。数を50の代わりに減らすのが安全かもしれません100。

これが機能するのは、「クリア」ボタンのclickイベントが入力のイベントの直後に実行されるためです。したがって、イベントが入力のイベントから100ミリ秒（50）以内に実行されなかった場合、クリックされなかっblurたと見なすのに十分安全です。clickblur

于 2013-03-25T18:09:09.413 に答える
0

私はこのように私の問題を解決しています（私は入力タグがとても嫌いです）：

<!DOCTYPE html>
<html>
<script src="http://code.jquery.com/jquery-1.9.0.js"></script>
<script>
$(function(){

$('div[contenteditable]').on('blur', function(){
alert('d');
});
$('div[contenteditable] > img').on('click', function(){
$(this).parent().text('');
});

});
</script>
<style>
div[contenteditable] { border:1px solid #009; position:relative;}
img {position:absolute; top:2px; right:2px; cursor: pointer;}
</style>
<body>

<div contenteditable="true">default value<img src="/" width="10" height="10" /></div>

</body>
</html>
于 2013-03-25T19:33:37.917 に答える