1

簡単な HTML ページを作成しています。入力フィールドの後に検索ボタンがあります。これはコードです：

<input type="text" id="sfield" placeholder="Write something">
<button id="search">Search!</button>

現在、ボタンと入力フィールドにいくつかのアクションを割り当てるための JavaScript を書いていますが、検索を開始するためにカーソルがフィールド上にある必要がある機能を追加することをお勧めします。もっと詳しく説明すると、誰かが何かを検索したい場合、通常の入力フィールドと同じように表示され、そのように機能します。ただし、誰かがフォームを自動送信するためのスクリプトを起動しようとすると、入力が挿入されていないかのように動作します。

たとえば、誰かがこのスクリプトを挿入しようとした場合:

document.getElementById('sfield').value="Some stuff";
document.getElementById('search').click();

検索は開始されますが、ユーザーが検索フィールドに何も入力せずに検索ボタンをクリックしたかのように、"Some stuff" 文字列は保存されません。さらに、行を追加します

    document.getElementById('sfield').focus();

フィールドにカーソルを置く唯一の方法は、ユーザーによる手動アクションになるように、何もしないでください。

そんなものを作ることができるかどうか疑問に思っています。EventListener を使用して検索フィールドを空白にすることはできましたが、ユーザーがカーソルをフィールドに置いたかどうかをスクリプトに識別させる手がかりがありません。

私は JQuery を使用したくないのですが、それでも問題ありません。どんなアイデアでも大歓迎です。ありがとう。

4

2 に答える 2

0

その場合、プログラムは状態を保持する必要があります。私はこのようにするだろう...

http://jsbin.com/hopicucuyi/edit?js、コンソール、出力

<input type="text" id="sfield" placeholder="Write something" data-validated = "false">
<button id="search">Search!</button>

<script>
   const inputField = document.getElementById('sfield');
const searchButton = document.getElementById('search');

inputField.onfocus = () => {
    inputField.setAttribute("data-validated", "true") 
}
searchButton.onclick = () => {
    const isValidated = inputField.getAttribute("data-validated");
    console.log('Is Validated: ' + isValidated);
}
</script>
于 2017-01-11T16:00:37.387 に答える