텍스트 상자 플래시백 입력은 항상 시작_javascript 기술에 입력 상자의 초점을 유지합니다.
일명 텍스트 상자 플래시백 입력은 입력 상자의 초점이 항상 시작 부분에 있음을 의미합니다. 그림과 같이 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를 보내주세요. 이 기사가 도움이 되기를 바랍니다.
핫 AI 도구
Undresser.AI Undress
사실적인 누드 사진을 만들기 위한 AI 기반 앱
AI Clothes Remover
사진에서 옷을 제거하는 온라인 AI 도구입니다.
Undress AI Tool
무료로 이미지를 벗다
Clothoff.io
AI 옷 제거제
Video Face Swap
완전히 무료인 AI 얼굴 교환 도구를 사용하여 모든 비디오의 얼굴을 쉽게 바꾸세요!
인기 기사
뜨거운 도구
메모장++7.3.1
사용하기 쉬운 무료 코드 편집기
SublimeText3 중국어 버전
중국어 버전, 사용하기 매우 쉽습니다.
스튜디오 13.0.1 보내기
강력한 PHP 통합 개발 환경
드림위버 CS6
시각적 웹 개발 도구
SublimeText3 Mac 버전
신 수준의 코드 편집 소프트웨어(SublimeText3)
Jquery에서 포커스를 제거하는 방법
Feb 17, 2023 am 10:20 AM
jquery에서 포커스를 제거하는 방법: 1. "document.getElementById('test').focus()"를 통해 포커스를 가져옵니다. 2. "document.getElementById('test').blur();" 메서드를 사용하여 제거합니다. 초점 .
포물선의 꼭지점, 초점, 준선을 찾는 C/C++ 프로그램
Sep 05, 2023 pm 05:21 PM
중심(초점이라고 함)의 한 점에서 등거리에 있는 곡선을 형성하는 평면 위의 점 집합은 포물선입니다. 포물선의 일반 방정식은 ax2+bx+c포물선의 정점이 가장 급격하게 회전하는 좌표입니다.
jQuery를 사용하여 숫자와 소수점만 입력할 수 있는 입력창 구현
Feb 26, 2024 am 11:21 AM
숫자와 소수점 입력을 제한하기 위해 jQuery 입력 상자를 구현합니다. 웹 개발 시 숫자와 소수점만 입력하도록 제한하는 등 사용자가 입력 상자에 입력하는 내용을 제어해야 하는 경우가 종종 있습니다. 이 제한은 JavaScript 및 jQuery를 통해 달성할 수 있습니다. 다음은 jQuery를 사용하여 입력창에 숫자 및 소수점 입력을 제한하는 기능을 구현하는 방법을 소개합니다. 1. HTML 구조 먼저 HTML로 입력 상자를 만들어야 하며 코드는 다음과 같습니다.
Vue를 사용하여 레이블이 지정된 입력 상자를 구현하는 방법은 무엇입니까?
Jun 25, 2023 am 11:54 AM
웹 애플리케이션이 개발되면서 레이블이 지정된 입력 상자가 점점 더 대중화되고 있습니다. 이러한 입력창을 통해 사용자는 보다 편리하게 데이터를 입력할 수 있으며, 입력된 데이터를 관리하고 검색할 수도 있습니다. Vue는 레이블이 지정된 입력 상자를 빠르게 구현하는 데 도움이 되는 매우 강력한 JavaScript 프레임워크입니다. 이 기사에서는 Vue를 사용하여 레이블이 있는 입력 상자를 구현하는 방법을 소개합니다. 1단계: Vue 인스턴스 만들기 먼저 페이지에 Vue 인스턴스를 만들어야 합니다. 코드는 다음과 같습니다. &l
Vue 개발 시 입력 상자 길이 제한을 최적화하는 방법은 무엇입니까?
Jun 30, 2023 am 08:44 AM
Vue 개발에서 입력 상자 입력 길이 제한을 최적화하는 방법 소개: Vue 개발 프로세스에서 입력 상자 길이 제한은 일반적인 요구 사항입니다. 사용자가 입력 상자에 입력하는 문자 수를 제한하면 데이터 정확성을 유지하고 사용자 경험을 최적화하며 시스템 성능을 향상시키는 데 도움이 됩니다. 이 글에서는 Vue 개발 시 입력 상자의 입력 길이 제한을 최적화하여 더 나은 사용자 경험과 개발 효율성을 제공하는 방법을 소개합니다. 1. v-model 지시어를 사용하여 입력 상자 값을 바인딩합니다. Vue 개발에서는 일반적으로 v-model 지시어를 사용합니다.
배열의 시작 부분에 요소를 삽입하려면 PHP 함수 'array_unshift'를 사용하십시오.
Jul 25, 2023 pm 03:39 PM
PHP 함수 "array_unshift"를 사용하여 배열의 시작 부분에 요소를 삽입하십시오. PHP는 동적 웹 페이지를 생성하기 위해 널리 사용되는 서버측 스크립팅 언어입니다. PHP에서 배열은 데이터 세트를 저장하고 조작하는 데 사용되는 매우 중요한 데이터 구조입니다. 때로는 배열의 시작 부분에 요소를 삽입해야 하는 경우 PHP 내장 함수 "array_unshift"를 사용할 수 있습니다. "array_unshift" 함수의 기능
CSS를 사용하여 간단하고 우아한 입력 상자를 만드는 방법을 단계별로 가르칩니다.
Jan 13, 2023 pm 03:55 PM
이번 글에서는 CSS를 활용하여 간단하고 정교한 입력 상자를 구현하는 방법을 주로 소개합니다~ 같이 살펴보는 친구들에게 도움이 되길 바랍니다. 도움이 필요합니다.
HTML 페이지가 PHP 페이지로 이동할 때 이름 입력 상자에 대한 필수 요구 사항을 구현합니다.
Mar 10, 2024 am 10:21 AM
HTML 페이지가 PHP 페이지로 이동할 때 이름 입력 상자에 필수 요구 사항을 추가해야 하는 경우 HTML 양식 요소와 JavaScript를 통해 수행할 수 있습니다. 이 기능을 구현하는 방법은 구체적인 코드 예제와 함께 아래에 자세히 설명되어 있습니다. 먼저 양식과 이름 입력 상자가 포함된 HTML 페이지를 만듭니다. 이름 입력 상자에 "필수" 표시를 설정하면 JavaScript를 사용하여 입력 상자에 대한 필수 확인을 구현할 수 있습니다. 사용자가 제출 버튼을 클릭하면 성은
