摘要:作者心葉時間什么是光標頁面上輸入框中閃爍的光標其實是一個選區,也就是選區的左邊界和右邊界直接形成的選區。非瀏覽器輸入框結點有二個屬性,分別代表選區開始位置,選區結束位置。和參數一樣,對于移動光標比較友好。
作者:心葉
時間:2018-09-13 12:28
頁面上輸入框中閃爍的光標其實是一個選區,也就是選區的左邊界和右邊界直接形成的選區。
非IE瀏覽器輸入框結點input=document.getElementById("#input")有二個屬性: selectionStart、selectionEnd,分別代表選區開始位置,選區結束位置。
通過修改這二個值就可以形成選區,寬度為0也就實現了光標的位置控制和獲取。
IE瀏覽器IE瀏覽器提供的API更加豐富:
createTextRange()、 document.selection.createRange()、moveStart() 、moveEnd() 、move() 、collapse() 、text 、select()。
第一步:
var range = input.createTextRange(); //創建一個文本選區對象。
第二步:一些操作
range.collapse(boolean);
可以傳入一個布爾值作為參數,參數默認值為true,指示向左還是向右壓縮
range.moveStart(param1,param2);
第一個參數可選值有 character、word、sentence、textedit. 比如character,即根據字符來偏移。第二個參數代表偏移的多少,正負表示方向。
range.moveEnd(param1,param2);
和上面那個方法參數一樣,不同的是這是用來移動結束邊界
第三步:
range.select(); //將range包含的區域選中。
需要注意的是:在調用range.select()方法之前,選區對象的內容并不會被添加選中效果
補充:
var range = document.selection.createRange();
這個方法根據當前頁面中的選中文字區域來創建一個選區對象,這個選區對象與createTextRange方法的到選區對象的區別在于,它的選區范圍為頁面選中文字的區域,即它的左右邊界不再是默認的左最小右最大。
range.move(param1,param2);
和moveStart參數一樣,對于移動光標比較友好。
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/54636.html
摘要:解決頁面使用在上滑動卡頓的問題首先你可能會給頁面的和增加了然后就可能造成上頁面滑動的卡頓問題。頁面橡皮彈回效果遮擋頁面選項卡有時和的去除掉問題可能就沒有了。該行無文字時,光標高度與的一致。 1.解決頁面使用overflow: scroll在iOS上滑動卡頓的問題? 首先你可能會給頁面的html和body增加了height: 100%, 然后就可能造成IOS上頁面滑動的卡頓問題。解決方案...
摘要:解決頁面使用在上滑動卡頓的問題首先你可能會給頁面的和增加了然后就可能造成上頁面滑動的卡頓問題。頁面橡皮彈回效果遮擋頁面選項卡有時和的去除掉問題可能就沒有了。該行無文字時,光標高度與的一致。 1.解決頁面使用overflow: scroll在iOS上滑動卡頓的問題? 首先你可能會給頁面的html和body增加了height: 100%, 然后就可能造成IOS上頁面滑動的卡頓問題。解決方案...
摘要:解決頁面使用在上滑動卡頓的問題首先你可能會給頁面的和增加了然后就可能造成上頁面滑動的卡頓問題。頁面橡皮彈回效果遮擋頁面選項卡有時和的去除掉問題可能就沒有了。該行無文字時,光標高度與的一致。 1.解決頁面使用overflow: scroll在iOS上滑動卡頓的問題? 首先你可能會給頁面的html和body增加了height: 100%, 然后就可能造成IOS上頁面滑動的卡頓問題。解決方案...
摘要:項目中文字由進行渲染。待觸發時,取消中文輸入標記,將文字渲染到上。而其中一些有趣的細節實現如文本渲染,對中文筆畫分割實現有趣的動畫等并沒有描寫。 導言 目前富文本編輯器的實現主要有兩種技術方案:一個是利用contenteditable屬性直接對html元素進行編輯,如draft.js;另一種是代理textarea + 自定義div + 模擬光標實現。對于類似word的經典富文本編輯器,...
閱讀 3579·2021-11-04 16:06
閱讀 3573·2021-09-09 11:56
閱讀 842·2021-09-01 11:39
閱讀 893·2019-08-29 15:28
閱讀 2289·2019-08-29 15:18
閱讀 823·2019-08-29 13:26
閱讀 3327·2019-08-29 13:22
閱讀 1039·2019-08-29 12:18