テキストボックスのフラッシュバック入力により、入力ボックスのフォーカスが常に先頭に維持されます

テキストボックスのフラッシュバック入力により、入力ボックスのフォーカスが常に先頭に維持されます_JavaScript スキル

WBOY

リリース： 2016-05-16 16:38:01

オリジナル

1777 人が閲覧しました

いわゆるテキストボックスのフラッシュバック入力とは、図に示すように、入力ボックスのフォーカスが常に先頭にあることを意味し、123456789を入力すると、入力ボックスに987654321が表示されます。

なぜこのデモをやりたいのですか？それは、プロジェクトでこれに遭遇したためです。プロジェクトの要件は、前方入力用と後方入力用の 2 つの入力ボックスです。以下に実装のアイデアとコードを書いていきます。
テキストフラッシュバック入力:

入力ボックスのフォーカスが常に先頭にあることを確認している限り、入力するたびに先頭にある、つまりフラッシュバックがあることがわかります

コード:

function setPosition(ctrl, pos) { //设置光标位置函数
if (ctrl.setSelectionRange) {
ctrl.focus();
ctrl.setSelectionRange(pos, pos);
} else if (ctrl.createTextRange) {
var range = ctrl.createTextRange(); //创建一个选择区域
range.collapse(true); //将光标移动到选择区域的开始位置
range.moveEnd('character', pos); //改变选择区域结束的位置
range.moveStart('character', pos); //改变选择区域开始的位置
range.select(); //将选择的内容同步到当前的对象
}
}

ログイン後にコピー

パラメータ pos を 0 に設定している限り。

以下は完全なデモで、通常の削除とフラッシュバック入力を実装しています。

<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<style>
.content {
width: 300px;margin:0 auto;margin-top:50px;
}
ul {
list-style: none;
}
.elem {
width: 200px;
}

</style>
<script src="http://cdn.staticfile.org/jquery/2.1.1-rc2/jquery.min.js"></script>
</head>
<body>
<div >
<ul>
<li>
<input type="text" class="elem">
</li>
<li>
<input type="text" class="elem">
</li>
<li>
<input type="text" class="elem">
</li>
</ul>
</div>
<script>
function setPosition(ctrl, pos) { //设置光标位置函数
if (ctrl.setSelectionRange) {
ctrl.focus();
ctrl.setSelectionRange(pos, pos);
} else if (ctrl.createTextRange) {
var range = ctrl.createTextRange(); //创建一个选择区域
range.collapse(true); //将光标移动到选择区域的开始位置
range.moveEnd('character', pos); //改变选择区域结束的位置
range.moveStart('character', pos); //改变选择区域开始的位置
range.select(); //将选择的内容同步到当前的对象
}
}
$('.elem').on('keypress keyup', function() {
if(event.keyCode === 8)
return;
setPosition(this,0);
});
</script>
</body>
</html>

ログイン後にコピー

その他、フォーカス位置を取得するための関連関数も付属していますので、ご利用ください

function getPosition(ctrl) {
// IE Support
var CaretPos = 0; 
if (document.selection) {
ctrl.focus();
var Sel = document.selection.createRange();
Sel.moveStart('character', -ctrl.value.length);
CaretPos = Sel.text.length;
}
// Firefox support
else if (ctrl.selectionStart || ctrl.selectionStart == '0')
CaretPos = ctrl.selectionStart;
return (CaretPos);
}

ログイン後にコピー

概要:

テキスト入力フォーカスを設定して取得した後、単語や変数全体の削除など、他の特殊効果を実行できます。

この記事に関する良いアイデアがあれば、@me までお知らせください。この記事がお役に立てば幸いです。