javascript - javascriptでHTML5ツールチップを切り替える

Question

属性を空のままにinputしてrequiredおくと、ツールチップが表示されます (Chrome を使用): 「このフィールドに入力してください」。

<input type="text" name="foo" required />

そのツールチップを任意のコンテンツの任意の場所で手動でアクティブ化する Javascript 関数はありますか? （自分で作成せずに）？

Answer 1

プログラムで「送信」ボタンをクリックできます。これにより、検証とツールチップがトリガーされます。たとえば、次のような HTML を使用します。

<form id="bla">
   <input type="text" required />
   <input type="submit" value="Submit" id="submit" />
</form>

呼び出し

document.getElementById("submit").click();

空のフィールドのツールチップが表示されます。

デモ: http://jsfiddle.net/bmF4N/

より詳細な制御が必要な場合は、http://jqueryvalidation.org/required-method/などのカスタム バリデータを調べる必要がある場合があります。

Answer 2

私の知る限り、ツールチップのテキストのみを変更できます。イベント
を聞いてみるinvalid

document.getElementById("foo").addEventListener("invalid", function (e) {
    if (e.target.value == "") {
        e.target.setCustomValidity('Hey! "' + e.target.value + '" is not a valid username.');
    }
});

ブラウザーの互換性についてはテストしていませんが、これは新しい機能であり、まだ十分にサポートされていない可能性があると思います。

Answer 3

もうできません: https://code.google.com/p/chromium/issues/detail?id=259050

クロム開発者の 1 人は、次のように明確に述べています。

Web 作成者は、独自の UI をゼロから構築する必要があります。