소위 텍스트 상자 플래시백 입력은 입력 상자의 초점이 항상 시작임을 의미합니다. 그림과 같이 123456789로 들어가면 입력 상자에 987654321이 표시됩니다.
왜이 데모를 만들고 싶습니까? 프로젝트에서 그것을 만났기 때문입니다. 프로젝트 요구 사항은 두 개의 입력 상자이며, 하나는 긍정적 인 순서로 입력되고 다른 하나는 플래시백에 입력됩니다. 아래에는 구현 아이디어와 코드를 적어 봅니다.
텍스트 플래시백 입력 :
입력 상자의 초점이 항상 처음이라는 것을 보장하는 한, 우리는 그것을 입력 할 때마다, 즉 재발을 달성 할 수 있습니다.
암호:
함수 setPosition (ctrl, pos) {// 커서 위치 함수를 (ctrl.setselectionRange) {ctrl.focus (); ctrl.setSelectionRange (pos, pos);} else if (ctrl.creatextrange) {var range = ctrl.createtextrange (); // 선택 영역 생성 범위 .CollApse (true); // 커서를 선택 영역의 시작 위치로 이동합니다. // 선택 영역이 범위를 끝내는 위치를 변경합니다 .movestart ( '문자', pos); // 선택 영역이 range.select ()를 시작하는 위치를 변경합니다. // 선택한 내용을 현재 객체와 동기화}}파라미터 POS를 0으로 설정하는 한 괜찮을 것입니다.
아래는 정상적인 삭제 및 플래시백 입력을 구현하는 완전한 데모입니다.
<! docType html> <html> <head> <title> </title> </title> <meta http-equiv = "content-type"content = "text/html; charset = utf-8"> <style>. 200px;} </style> <script src = "http://cdn.staticfile.org/jquery/2.1.1-rc2/jquery.min.js"> </script> </head> <body> <div style = ""> <ul> <li> <input type = "text"> <li> <li> tampe = "text"> </li> <li> <입력 유형 = "text"> </li> </ul> </div> <cunture setposition (ctrl, pos) {// 커서 위치 함수를 설정하면 (ctrl.setSelectionRange) {ctrl.focus (); ctrl.setSelectionRange (pos); {var range = ctrl.creatextrange (); // 선택 영역 생성 범위 .CollApse (true); // 커서를 선택 영역의 시작 위치로 이동합니다. // 선택 영역의 끝 위치를 변경합니다. // 선택 영역의 시작 위치를 변경합니다. // 선택한 내용을 현재 객체}} $ ( '. elem')에 동기화합니다 ( 'keypress keyup', function () {if (event.keyCode === 8) return; setPosition (this, 0);}); </script> </body> </html>또한 관련 기능을 사용하여 초점 위치를 얻을 수 있습니다.
함수 getPosition (ctrl) {// upportVar caretpos = 0; if (docut ctrl.selectionStart; return (caretpos);}요약 :
텍스트 입력 초점을 설정하고 받으면 전체 단어 나 변수 삭제 등과 같은 다른 특수 효과를 수행 할 수 있습니다.
이 기사에 대한 좋은 아이디어가 있다면 @ME를 할 수 있습니다.이 기사가 도움이되기를 바랍니다.