2010-12-02 29 views
70

ページロード時に特定の入力ボックスにカーソルを合わせるにはどうすればよいですか?フォーカス入力ボックスオンロード

初期テキスト値も保持し、入力の最後にカーソルを置くことは可能ですか?

<input type="text" size="25" id="myinputbox" class="input-text" name="input2" value = "initial text" /> 

答えて

130

質問には2つの部分があります。

1)ページの読み込みにどのように入力を集中させるのですか?

入力にはautofocus属性を追加できます。

<input id="myinputbox" type="text" autofocus> 

ただし、これは一部のブラウザでサポートされていない可能性がありますので、javascriptを使用することができます。

window.onload = function() { 
    var input = document.getElementById("myinputbox").focus(); 
} 

2)どのように入力されたテキストの末尾にカーソルを置きますか?

ここには、一部の借用コードがanother SO answerの非jQueryソリューションがあります。

function placeCursorAtEnd() { 
    if (this.setSelectionRange) { 
    // Double the length because Opera is inconsistent about 
    // whether a carriage return is one character or two. 
    var len = this.value.length * 2; 
    this.setSelectionRange(len, len); 
    } else { 
    // This might work for browsers without setSelectionRange support. 
    this.value = this.value; 
    } 

    if (this.nodeName === "TEXTAREA") { 
    // This will scroll a textarea to the bottom if needed 
    this.scrollTop = 999999; 
    } 
}; 

window.onload = function() { 
    var input = document.getElementById("myinputbox"); 

    if (obj.addEventListener) { 
    obj.addEventListener("focus", placeCursorAtEnd, false); 
    } else if (obj.attachEvent) { 
    obj.attachEvent('onfocus', placeCursorAtEnd); 
    } 

    input.focus(); 
} 

これは、jQueryでこれをどのように達成するかの例です。

<input type="text" autofocus> 

<script> 
$(function() { 
    $("[autofocus]").on("focus", function() { 
    if (this.setSelectionRange) { 
     var len = this.value.length * 2; 
     this.setSelectionRange(len, len); 
    } else { 
     this.value = this.value; 
    } 
    this.scrollTop = 999999; 
    }).focus(); 
}); 
</script> 
+2

最初のコードブロックは、実際にナンプラーを提案既存の値の末尾にカーソルを置くと、うまくいきます。私はあなたの助けを感謝します。 – Codex73

3

コードスニペット:これを行うの

 

function focusOnMyInputBox(){ 
    document.getElementById("myinputbox").focus(); 
} 

<body onLoad="focusOnMyInputBox()")> 


<input type="text" size="25" id="myinputbox" class="input-text" name="input2" onfocus="this.value = this.value;" value = "initial text" /> 
 
2

ポータブルな方法this oneのような(ブラウザの違いを処理するために)カスタム関数を使用しています。その後

あなた<body>タグ、jessegavinが書いたようにの最後にセットアップonloadのハンドラを:

window.onload = function() { 
    document.getElementById("myinputbox").focus(); 
} 
40

ジャストヘッドアップ - あなたは今、それをサポートするブラウザ用のJavaScriptをせずにHTML5でこれを行うことができます。

<input type="text" autofocus> 

あなたは、おそらくこれで開始し、古いブラウザ用のフォールバックを提供するために、JavaScriptでその上に構築したいです。

+0

これは、入力フィールドの最後の位置にカーソルを移動していることを知っていますか? –

+1

@ Codex73がHTML5のプレースホルダ属性の機能を達成しようとしているとは思いません。現在入力されている値の末尾にカーソルが自動的に配置されるように思えます。 – jessegavin

+2

そうです、これは完全な解決策ではありません。しかし、これは2つのことを解決します(onloadオートフォーカスとプレースホルダテキスト)。 –

9
$(document).ready(function() { 
    $('#id').focus(); 
}); 
+0

これにはjQueryが必要です。 –

+1

ええ、あなたはjQueryのlibsを含める必要があります:) – Nasruddin

0

これは私のために正常に動作するものである:

<form name="f" action="/search"> 
    <input name="q" onfocus="fff=1" /> 
</form> 

FFFは、名前は絶対に無関係であるとその狙いは、その入力にフォーカスを強制するために、一般的なonloadイベントを停止するようになり、グローバル変数になります。

<body onload="if(!this.fff)document.f.q.focus();"> 
    <!-- ... the rest of the page ... --> 
</body> 

から:http://webreflection.blogspot.com.br/2009/06/inputfocus-something-really-annoying.html

1

あなたがフォームの後にこのを追加することができ、何らかの理由BODYタグに追加できない場合:

<SCRIPT type="text/javascript"> 
    document.yourFormName.yourFieldName.focus(); 
</SCRIPT> 
1

は正常に動作...

window.onload = function() { 
    var input = document.getElementById("myinputbox").focus(); 
} 
0

試してみてください。

Javascriptのピュア:

[elem][n].style.visibility='visible'; 
[elem][n].focus(); 

のjQuery:

[elem].filter(':visible').focus(); 
関連する問題