將游標始終定位與文字框的左側
在實際應用中,可能很少有這樣的需求,那就是將游標位置始終定位於文字框的左側。
雖然這種要求比較少見,但也並非沒有,下面就通過程式碼例項介紹一下如何實現此功能。
程式碼如下:
[HTML] 純文字檢視 複製程式碼<!DOCTYPE html><html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> <style type="text/css"> ul{list-style:none;} .elem{width:200px;} </style> <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script> <script type="text/javascript"> 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(); } } $(document).ready(function(){ $('.elem').on('keypress keyup',function(){ if(event.keyCode===8){ return; } setPosition(this,0); }); }) </script> </head> <body> <div> <ul> <li><input type="text" class="elem"></li> </ul> </div> </body> </html>
上面的程式碼實現了我們的要求,在文字框輸入內容的時候,能夠始終將游標定位於文字框的左側。
程式碼註釋:
1.function setPosition(ctrl,pos){},此函式實現了定位功能,第一個引數是文字框物件,第二個引數是定位的位置。2.if(ctrl.setSelectionRange),判斷是否支援setSelectionRange()函式,其實這裡判斷是否是標準瀏覽器。
3.ctrl.focus(),讓文字框獲取焦點,完全可以不要此程式碼。
4.ctrl.setSelectionRange(pos,pos),setSelectionRange()函式可以設定當文字框內容選中的開始和結束位置,兩個引數分別用來規定開始位置和結束位置。
5.else if(ctrl.createTextRange),用來相容低版本IE瀏覽器,其實一直到IE10都是支援的,IE11不支援。
6.var range=ctrl.createTextRange(),用來建立一個Range物件。
7.range.collapse(true),將Range物件的內容清空。
8.range.moveEnd('character',pos),設定文字框中選區的內容的開始位置。
9.range.moveStart('character',pos),設定文字框中選區的內容的結束位置。
10.range.select(),將選區中的內容呈現高亮顯示。
相關文章
- input輸入框的游標定位的問題
- CSS 設定文字框游標顏色CSS
- WPF 自定義文字框輸入法 IME 跟隨游標
- 模擬實現文字框游標效果程式碼例項
- 預設讓表單第一個input文字框獲取游標
- 谷歌瀏覽器中文字框游標居中和字型大小顯示谷歌瀏覽器
- 文字框谷歌游標和其他瀏覽器不一致解決方案谷歌瀏覽器
- input 獲取游標位置與設定游標位置
- js選中指定位置文字框文字程式碼JS
- 純css改變輸入框游標顏色CSS
- winform之手繪矩形及游標字串與游標關聯顯示ORM字串
- input標籤附帶提示文字(bootstrap裡面輸入框的兩側同時新增額外元素)boot
- 文字識別(三)--文字定位與切割
- jquery實現的在游標處插入文字程式碼例項jQuery
- Android 中怎麼把edittext游標放在文字下面Android
- ecshop後臺新增左側選單與分配許可權
- weblogic 左側的樹無法顯示Web
- tpextbuilder- 左側樹形導航UI
- 左側分類導航選單
- javascript實現文字框標籤驗證JavaScript
- 實現文字標題和input文字框垂直居中對齊
- Win10怎麼開啟游標指示器_win10開啟文字游標指示器的圖文教程Win10
- Python文字框與按鈕Python
- jQuery實現左側分類選單jQuery
- (12)mysql 中的游標MySql
- IDEA 右側的maven框消失IdeaMaven
- Windows 11中如何將游標更改為暗模式的方法教程Windows模式
- 文字框與文字垂直對齊程式碼例項
- 將選中的下拉選單值寫入文字框
- oracle實驗記錄 (子游標與解析)Oracle
- 左側固定,右側自適應的佈局方式理解margin負值理論
- 七種實現左側固定,右側自適應兩欄佈局的方法
- 電商左側商品分類選單實現
- layui自定義ajax左側三級選單UI
- 小程式端實現文字展示以及標題定位
- 兩欄佈局,左側可伸縮,右側寬度自適應
- 左側固定,右側自適應的佈局方式(新增評論區大佬教的方法)
- 使用 ant design 模態框 載入框始終在上面,渲染無效