文字框倒敘輸入讓輸入框的焦點始終在最開始的位置_javascript技巧
所謂的文字方塊倒敘輸入是指輸入框的焦點總是在最開始的位置，如圖所示，當我輸入123456789時，在輸入框上顯示的是987654321。
為什麼要做這個Demo？是因為在專案中遇到了，專案需求是兩個輸入框，一個正序輸入，另一個倒敘輸入。 下面我把實作的想法和程式碼寫出來。
文字倒敘輸入：
只要我們保證輸入框的焦點始終在第一位，這樣的話就可以實現每次我們輸入的都在最前面，即倒敘
代碼：
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就可以了。
下面是一個完整的Demo，這個Demo實現了正常刪除和倒敘輸入。
<!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 Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。
Undress AI Tool
免費脫衣圖片
Clothoff.io
AI脫衣器
Video Face Swap
使用我們完全免費的人工智慧換臉工具，輕鬆在任何影片中換臉！
熱門文章
熱工具
記事本++7.3.1
好用且免費的程式碼編輯器
SublimeText3漢化版
中文版，非常好用
禪工作室 13.0.1
強大的PHP整合開發環境
Dreamweaver 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輸入框限制數字和小數點輸入在Web開發中，我們常常會遇到需求需要控制使用者在輸入框中輸入的內容，例如限制只能輸入數字和小數點。這種限制可以透過JavaScript和jQuery來實現。以下將介紹如何使用jQuery實作輸入框限制數字和小數點輸入的功能。一、HTML結構首先，我們需要在HTML中建立一個輸入框，程式碼如下：
如何使用 Vue 實現標籤的輸入框？
Jun 25, 2023 am 11:54 AM
隨著Web應用的發展，標籤的輸入框越來越受歡迎。這種輸入框可以讓使用者更方便輸入數據，同時也方便使用者對已輸入的數據進行管理和搜尋。 Vue是一款非常強大的JavaScript框架，它可以幫助我們快速實現帶有標籤的輸入框。本文將介紹如何使用Vue實作標籤的輸入框。第一步：建立Vue實例首先，我們需要在頁面上建立Vue實例，程式碼如下：&l
Vue開發中輸入框長度限制的最佳化方法是什麼？
Jun 30, 2023 am 08:44 AM
如何最佳化Vue開發中的輸入框輸入長度限制問題引言：在Vue開發過程中，輸入框長度限制是一個常見的需求。限制使用者在輸入框中輸入的字元數有助於保持資料的準確性、優化使用者體驗以及提高系統的效能。本文將介紹如何最佳化Vue開發中的輸入框輸入長度限制問題，以提供更好的使用者體驗和開發效率。一、使用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的相關知識，其中主要介紹了怎麼用CSS實現一個簡單又高大上的輸入框，手把手教你哦~下面一起來看一下吧，希望對需要的朋友有所幫助。
實作HTML頁面跳到PHP頁面時姓名輸入框的必填要求
Mar 10, 2024 am 10:21 AM
在HTML頁面跳到PHP頁面時，如果需要在姓名輸入框中加入必填要求，可以透過HTML的表單元素和JavaScript實作。以下將詳細介紹如何實現這項功能，並附上具體的程式碼範例。首先，我們建立一個HTML頁面，包含一個表單和一個姓名輸入框。在姓名輸入框中設定一個「必填」標記，可以透過JavaScript來實現對該輸入框的必填驗證。當用戶點擊提交按鈕時，如果姓
