javascriptまたはjqueryでfocus（）が機能していません

javascriptを使用して入力要素に注目しようとしています。これはhtmlです。私は手動でマウスを使ってクリックすると、私は黄色の背景を見ることができますjavascriptまたはjqueryでfocus（）が機能していません

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <style> 
 
    input:focus { 
 
     background-color: yellow; 
 
    } 
 
    </style> 
 
</head> 
 

 
<body> 
 

 
    <p>Click inside the text fields to see a yellow background:</p> 
 

 
    <form> 
 
    First name: <input id="abc" type="text" name="firstname"><br> 
 
    </form> 
 

 
</body> 
 

 
</html>

。しかし、コード$（ '＃abc'）.focus（）またはdocument.getElementById（ 'abc'）を実行すると、focus（）は表示されません。どのようにjavascriptを使用してマウスのフォーカスをシミュレートするには？

出典

2017-07-16 Vishnu Paspunoor

あなたのコードは動作しますが、ここでは[フィドル]（HTTPSがあります.net/kukicvladimir/1n5o4qkf /）問題を再現できない –

コードが動作しています.JavaScriptで構文エラーがないかどうかを確認してください。また、jsファイルのパスを名前空間に設定してください。 –

これがすべてのコードの場合は、 jQueryは含まれていますか？ – mrbubbles

あなたが間違っていることはわかりませんが、document.getElementById('abc').focus()を使って入力要素にアクセスすると、黄色の背景が見えます。ここで

const input = document.getElementById('abc'); 
 

 
input.focus();

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <style> 
 
    input:focus { 
 
     background-color: yellow; 
 
    } 
 
    </style> 
 
</head> 
 

 
<body> 
 

 
    <p>Click inside the text fields to see a yellow background:</p> 
 

 
    <form> 
 
    First name: <input id="abc" type="text" name="firstname"><br> 
 
    </form> 
 

 
</body> 
 

 
</html>

出典

2017-07-16 16:59:29

ちょうど、それは動作します、それ以外の何か間違っています。コメントでなければならない、答えではありません。 –

あなたはそれが働いています。お手伝いをしてください。

$("#boton").click(function() { 
 
    $("#abc").focus(); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <style> 
 
    input:focus { 
 
     background-color: yellow; 
 
    } 
 
    </style> 
 
</head> 
 

 
<body> 
 

 
    <p>Click inside the text fields to see a yellow background:</p> 
 

 
    <form> 
 
    First name: <input id="abc" type="text" name="firstname"><br> 
 
    </form> 
 
    <button id="boton"> Click Me to focus 
 
</button> 
 

 
</body> 
 

 
</html>

出典

2017-07-16 17:01:14

document.getElementById('abc').focus();あなたがhemlのheadセクションに<script>にこのラインを入れた場合に動作します。

それとも、jQueryを使ってそれを実行したい場合、あなたはこのようにdocument.ready関数内でそのコードを配置する必要があります：// jsfiddle：

$(document).ready(function(){ 
    $('#abc').focus(); 
});

出典

2017-07-16 17:01:43

いいえ - 両方のステートメントは単に間違っています。 –

@ freedomn-m、あなたはどうすれば教えてくれますか？ –

Ok.1このスクリプトを 'head'に入れると、bodyが生成される前に実行されます（これがjqueryでdoc.readyを使用する理由です）。したがって、 '＃abc'要素はまだ存在しないので、1は動作しません。 2. jqueryコードをdoc.readyに配置する必要はありません。ページで発生したときに1で実行されます。本文の末尾に '$（ '＃abc'）。focus（）'（ドキュメントは用意されていません）だけを置くと、それは動作します。 doc.readyを使用して、コードが本文内の位置に依存しないようにします。 –

javascriptまたはjqueryでfocus（）が機能していません

答えて

関連する問題