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