집 > 기사 > 웹 프론트엔드 > 텍스트 상자 플래시백 입력은 항상 시작_javascript 기술에 입력 상자의 초점을 유지합니다.

텍스트 상자 플래시백 입력은 항상 시작_javascript 기술에 입력 상자의 초점을 유지합니다.

WBOY원래의: 2016-05-16 16:38:011692검색

일명 텍스트 상자 플래시백 입력은 입력 상자의 초점이 항상 시작 부분에 있음을 의미합니다. 그림과 같이 123456789를 입력하면 입력 상자에 987654321이 표시됩니다.

왜 이 데모를 하려고 합니까? 프로젝트에서 만났기 때문입니다. 프로젝트 요구 사항은 두 개의 입력 상자, 하나는 정방향 입력용이고 다른 하나는 역방향 입력용입니다. 아래에는 구현 아이디어와 코드를 작성하겠습니다.
텍스트 플래시백 입력:

입력 상자의 초점이 항상 첫 번째 위치에 있는지 확인하면 입력할 때마다 맨 앞에, 즉 플래시백이 발생한다는 것을 알 수 있습니다

코드:

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를 보내주세요. 이 기사가 도움이 되기를 바랍니다.

성명：

이전 기사：페이지를 닫는 이유 및 해결 방법 window.location 이벤트가 실행되지 않음_javascript 기술다음 기사：페이지를 닫는 이유 및 해결 방법 window.location 이벤트가 실행되지 않음_javascript 기술

텍스트 상자 플래시백 입력은 항상 시작_javascript 기술에 입력 상자의 초점을 유지합니다.

관련 기사