JAvascriptフォーカスをテキストボックスの末尾に
6393 ワード
Jqueryでは$("#idEle")を直接呼び出すことができる.focus();に表示されます.これにより、どの入力ボックスが空であるかがフォーカスをその入力ボックスに移動する.この機能はとても便利です.しかし、小さな問題があります.それはobjです.focus()入力ボックスにフォーカスを移動すると、文字カーソル(キラキラした縦線)がこの入力ボックスの最初の文字の位置に移動します...上の判断から言えば..テキストボックスに内容がない場合..obj.focusはちょうど私たちが直接テキストボックスに内容を入力することを満たすことができて、テキストボックスをクリックしてテキストに焦点を当てる必要はありません...ただし、テキストボックスに既に内容がある場合は..しかし、この内容は合法的ではありません.obj.focus()は、このテキストボックスの最初の文字の位置にカーソルを移動します.この時、ユーザー体験に注意するデザイナーを憂鬱にさせます...テキストボックスに焦点を当て、テキストカーソルをテキストボックスの最後に移動して、ユーザーがテキストボックスをクリックせずに直接コンテンツを入力できるようにする必要があります.入力内容は元の内容の后ろに追加されます.
chrome/firefox focusを呼び出すと、入力ボックスの内容の前のマウスの位置に自動的に戻ります.最後に最後に移動しない場合はselectionStartプロパティを使用します.
ただし、編集可能な「
chrome/firefox focusを呼び出すと、入力ボックスの内容の前のマウスの位置に自動的に戻ります.最後に最後に移動しない場合はselectionStartプロパティを使用します.
<
script
type
=
"text/javascript"
>
function test(obj) {
if (typeof obj == 'string') obj = document.getElementById(obj);
obj.focus();
if (obj.createTextRange) {
var rtextRange = obj.createTextRange();
rtextRange.moveStart('character', obj.value.length);
rtextRange.collapse(true);
rtextRange.select();
}
else if (obj.selectionStart) obj.selectionStart = obj.value.length;
}
</
script
><
input
type
=
"text"
id
=
"txt1"
/><
input
type
=
"button"
onclick
=
"test('txt1');"
value
=
" "
/><
br
/>
<
input
type
=
"text"
id
=
"txt2"
/><
input
type
=
"button"
onclick
=
"test('txt2');"
value
=
" "
/>
ただし、編集可能な「
」タブは「」タブではありません.「
」タブには「selectionStart」属性はありません.もう1つの迂回しないコード実装:
<
script
type
=
"text/javascript"
>
function test(obj) {
if (typeof obj == 'string') obj = document.getElementById(obj);
obj.focus();
if (obj.createTextRange) {//ie
var rtextRange = obj.createTextRange();
rtextRange.moveStart('character', obj.value.length);
rtextRange.collapse(true);
rtextRange.select();
}
else if (obj.selectionStart){//chrome "<
input
>"、"<
textarea
>"
obj.selectionStart = obj.value.length;
}else if(window.getSelection){
var sel = window.getSelection();
var tempRange = document.createRange();
tempRange.setStart(obj.firstChild, obj.firstChild.length);
sel.removeAllRanges();
sel.addRange(tempRange);
//obj.focus();
}
}
</
script
>
<
div
id
=
"txt1"
contenteditable
=
"true"
></
div
>
<
input
type
=
"button"
onclick
=
"test('txt1');"
value
=
" "
/><
br
/>
<
div
id
=
"txt2"
contenteditable
=
"true"
></
div
>
<
input
type
=
"button"
onclick
=
"test('txt2');"
value
=
" "
/>
<
br
/>
<
br
/>
<
input
id
=
"txt3"
type
=
"text"
/>
<
input
type
=
"button"
onclick
=
"test('txt3');"
value
=
" "
/><
br
/>
<
input
id
=
"txt4"
type
=
"text"
/>
<
input
type
=
"button"
onclick
=
"test('txt4');"
value
=
" "
/>