社群
學習
工具庫
AI工具
休閒
搜尋
繁体中文
首頁 web前端 js教程 文字框倒敘輸入讓輸入框的焦點始終在最開始的位置_javascript技巧

文字框倒敘輸入讓輸入框的焦點始終在最開始的位置_javascript技巧

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB
WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB
May 16, 2016 pm 04:38 PM
開始位置 焦點 輸入框

所謂的文字方塊倒敘輸入是指輸入框的焦點總是在最開始的位置，如圖所示，當我輸入123456789時，在輸入框上顯示的是987654321。


為什麼要做這個Demo？是因為在專案中遇到了，專案需求是兩個輸入框，一個正序輸入，另一個倒敘輸入。 下面我把實作的想法和程式碼寫出來。
文字倒敘輸入：

只要我們保證輸入框的焦點始終在第一位，這樣的話就可以實現每次我們輸入的都在最前面，即倒敘

代碼：

1

2

3

4

5

6

7

8

9

10

11

12

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實現了正常刪除和倒敘輸入。

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

<!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>

登入後複製

另外在附上相關的獲取焦點位置的函數，可能你會用到

1

2

3

4

5

6

7

8

9

10

11

12

13

14

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，希望此文能夠幫助你！

本網站聲明
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序，用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

Video Face Swap

Video Face Swap

使用我們完全免費的人工智慧換臉工具，輕鬆在任何影片中換臉！

顯示更多

熱門文章

如何修復KB5055612無法在Windows 10中安裝？
3 週前 By DDD
<🎜>：種植花園 - 完整的突變指南
3 週前 By DDD
<🎜>：泡泡膠模擬器無窮大 - 如何獲取和使用皇家鑰匙
3 週前 By 尊渡假赌尊渡假赌尊渡假赌
北端：融合系統，解釋
3 週前 By 尊渡假赌尊渡假赌尊渡假赌
Mandragora：巫婆樹的耳語 - 如何解鎖抓鉤
3 週前 By 尊渡假赌尊渡假赌尊渡假赌
顯示更多

熱工具

記事本++7.3.1

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

SublimeText3漢化版

中文版，非常好用

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

顯示更多

熱門話題

Java教學
1667
14
CakePHP 教程
1426
52
Laravel 教程
1328
25
PHP教程
1273
29
C# 教程
1255
24
顯示更多
Related knowledge
jquery怎麼去除焦點 jquery怎麼去除焦點 Feb 17, 2023 am 10:20 AM

jquery去除焦點的方法：1、透過「document.getElementById('test').focus()」取得焦點；2、使用「document.getElementById('test').blur();」方法移除焦點即可。

尋找拋物線的頂點、焦點和準線的C/C++程式 尋找拋物線的頂點、焦點和準線的C/C++程式 Sep 05, 2023 pm 05:21 PM

平面上形成一條曲線的點的集合，使得該曲線上的任何點與中心點（稱為焦點）等距都是拋物線。拋物線的一般方程式= ax2+bx+c 拋物線的頂點是其最急轉彎的座標，而

使用jQuery實作輸入框僅允許輸入數字和小數點 使用jQuery實作輸入框僅允許輸入數字和小數點 Feb 26, 2024 am 11:21 AM

實作jQuery輸入框限制數字和小數點輸入在Web開發中，我們常常會遇到需求需要控制使用者在輸入框中輸入的內容，例如限制只能輸入數字和小數點。這種限制可以透過JavaScript和jQuery來實現。以下將介紹如何使用jQuery實作輸入框限制數字和小數點輸入的功能。一、HTML結構首先，我們需要在HTML中建立一個輸入框，程式碼如下：

如何使用 Vue 實現標籤的輸入框？ 如何使用 Vue 實現標籤的輸入框？ Jun 25, 2023 am 11:54 AM

隨著Web應用的發展，標籤的輸入框越來越受歡迎。這種輸入框可以讓使用者更方便輸入數據，同時也方便使用者對已輸入的數據進行管理和搜尋。 Vue是一款非常強大的JavaScript框架，它可以幫助我們快速實現帶有標籤的輸入框。本文將介紹如何使用Vue實作標籤的輸入框。第一步：建立Vue實例首先，我們需要在頁面上建立Vue實例，程式碼如下：&l

Vue開發中輸入框長度限制的最佳化方法是什麼？ Vue開發中輸入框長度限制的最佳化方法是什麼？ Jun 30, 2023 am 08:44 AM

如何最佳化Vue開發中的輸入框輸入長度限制問題引言：在Vue開發過程中，輸入框長度限制是一個常見的需求。限制使用者在輸入框中輸入的字元數有助於保持資料的準確性、優化使用者體驗以及提高系統的效能。本文將介紹如何最佳化Vue開發中的輸入框輸入長度限制問題，以提供更好的使用者體驗和開發效率。一、使用v-model指令綁定輸入框值在Vue開發中，我們通常使用v-model指

使用PHP函數 'array_unshift' 將元素插入陣列的起始位置 使用PHP函數 'array_unshift' 將元素插入陣列的起始位置 Jul 25, 2023 pm 03:39 PM

使用PHP函數"array_unshift"將元素插入陣列的起始位置PHP是廣泛使用的伺服器端腳本語言，用於建立動態網頁。在PHP中，陣列是一種非常重要的資料結構，用於儲存和操作一組資料。有時候我們需要在陣列的起始位置插入一個元素，這時就可以使用PHP內建函數"array_unshift"。 "array_unshift"函數的作用

手把手教你用CSS實現簡單大氣的輸入框 手把手教你用CSS實現簡單大氣的輸入框 Jan 13, 2023 pm 03:55 PM

這篇文章為大家帶來了關於CSS的相關知識，其中主要介紹了怎麼用CSS實現一個簡單又高大上的輸入框，手把手教你哦~下面一起來看一下吧，希望對需要的朋友有所幫助。

實作HTML頁面跳到PHP頁面時姓名輸入框的必填要求 實作HTML頁面跳到PHP頁面時姓名輸入框的必填要求 Mar 10, 2024 am 10:21 AM

在HTML頁面跳到PHP頁面時，如果需要在姓名輸入框中加入必填要求，可以透過HTML的表單元素和JavaScript實作。以下將詳細介紹如何實現這項功能，並附上具體的程式碼範例。首先，我們建立一個HTML頁面，包含一個表單和一個姓名輸入框。在姓名輸入框中設定一個「必填」標記，可以透過JavaScript來實現對該輸入框的必填驗證。當用戶點擊提交按鈕時，如果姓

See all articles