HTMLをすべて持たずにHTML入力要素にフォーカスを設定するにはどうすればよいですか？

StackOverflow https://stackoverflow.com/questions/808908

  •  03-07-2019
  •  | 
  •  

質問

まず、背景： 私はタペストリー4で作業しているので、特定のページのHTMLは、アプリケーション全体に散在するさまざまなHTMLの断片から縫い合わされています。作業中のコンポーネントには<body>タグがないため、onload属性を指定できません。

コンポーネントには、ページの読み込み時にフォーカスが必要な入力要素があります。 bodyタグにアクセスせずにページの読み込み時にファイル入力（またはその他のテキストタイプの入力）にフォーカスを設定する方法を知っている人はいますか？

次のようにスクリプトを本文に挿入してみました
document.body.setAttribute('onload', 'setFocus()')
（setFocusはファイル入力要素にフォーカスを設定する関数です）、しかしそれは機能しませんでした。驚いたとは言えません。

編集：
既に述べたように、私は実際にページコンポーネントでこれを行う必要があります。最終的に、ページ上の最初の編集可能な表示可能な入力にフォーカスを与えるために使用するスクリプトに、ファイルタイプの入力を追加しました。この問題の調査では、これを行うことでセキュリティの問題は見つかりませんでした。

役に立ちましたか？

解決

これは私にとってはうまくいった：

<script>
  function getLastFormElem(){
    var fID = document.forms.length -1;
    var f = document.forms[fID];
    var eID = f.elements.length -1;
    return f.elements[eID];
  }
</script>


<input name="whatever" id="maybesetmaybenot" type="text"/>
<!-- any other code except more form tags -->

<script>getLastFormElem().focus();</script>

他のヒント

<script>
window.onload = function()  {
     document.getElementById('search_query').select();
    //document.getElementById('search_query').value = ''; 
    // where 'search_query' will be the id of the input element
};
</script>

便利だと思う!!!!!!

ウィンドウにonloadハンドラーを指定できます

window.onload = setFocus;

カプセル化に根本的な問題があると思います。ほとんどの場合、イベントハンドラーをonloadイベントにアタッチできますが、 http：// ejohnを参照してくださいこれを行う方法については、John Resigの.org / projects / flexible-javascript-events / を使用します。setFocusは、ページ上の2つのコンポーネントにフォーカスを要求することができないため、ページコンポーネントによって管理する必要があります。ページが読み込まれるとき。

tabstop 属性

まず、入力ファイルは他の入力と同じではありません。これを念頭に置いておく必要があります。セキュリティ上の理由からです。入力ファイルがフォーカスを取得したら、読み取り専用にするか、ブラウザでダイアログをポップアップしてファイルを選択する必要があります。

今、他の入力については、いくつかの要素でonloadイベントを試すことができます（本体だけでなくonloadイベントがあります）。または、htmlの中央でインラインjavascriptを使用できます。あなたがブラウザがそれを読んでいる間にそれが実行される関数であると告げずにjavascriptコードを置いた場合。次のようなもの：

<script type="text/javascript">

function yourFunction()
{
   ...;
};

alert('hello world!");

yourFunction();

</script>

この機能は、ブラウザが読み込んだ直後にアラートの後に実行されます。

可能であれば、jQueryを使用してjavascriptを実行する必要があります。ライブがすっごく簡単になります。...：）

jQuery を使用すると、次のようになります。

$(function() {
    $("input:file").eq(0).focus()
})

プレーンなjavascriptを使用すると、次のようになります。

var oldWindowOnload = window.onload; // be nice with other uses of onload 
window.onload = function() {
    var form = document.forms[0];
    for(i=0; i < form.length; i++) {
        if (form[i].type == "file") {
            form[i].focus();
        }
    }
    oldWindowOnload();
}

プレーンなJavaScriptを使用したより詳細なソリューションについては、 Webページの最初の入力にフォーカスを設定 CodeProjectで。

Scunliffeのソリューションには使いやすさがあります。

ページスクリプトの読み込みが遅い場合、<！> quot; onLoad <！> quot;からfocus（）を呼び出します。イベントは非常に厄介なページを作成します<！> quot; jump <！> quot;ユーザーがページをスクロールして離れた場合。したがって、これはよりユーザーフレンドリーなアプローチです：

<input id="..."></input>
... really small piece of HTML ...
<script>getTheDesiredInput().focus();</script>
ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top