マウスクリックが必要な入力フィールド

Question

単純な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(); 

検索を開始するが、ユーザーが書き込むことなく、検索ボタンをクリックしたかのように「いくつかのもの」という文字列は、保存されません検索フィールド。さらに、行を追加すると、フィールドにカーソルを置く唯一の方法はユーザーの手作業であるため、行を追加すると何も行われません。

私はそれが可能かどうか疑問に思っています。私は既にEventListenerで検索フィールドを空白にしていましたが、ユーザーがカーソルをフィールドに置いたかどうかをスクリプトが識別できるかどうかは分かりません。

私はJQueryを使用しないことをお勧めしますが、それにも問題ありません。どんな考えも大きく受け入れられるだろう。ありがとう。

Answer 1

この場合、プログラムは状態を保持する必要があります。私は何をやっている、完全に明確ではないよ...このよう

http://jsbin.com/hopicucuyi/edit?js,console,output

<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>