input輸入框在游標處, 插入文字段

2021-09-25 08:06:29 字數 792 閱讀 6703

在專案中會遇到這樣的情況,使用者可以在textarea中輸入,也可以選擇既有的可供選擇的 段落,現需求是使用者把游標放在哪,使用者選擇後的 段落就 插進 該處位置。

實現方式主要是依靠倆點:

一、利用

doxument.selection (這是ie的)

docuemnt.getelementbyid(***x).selsectionstart (這是谷歌等的)

這倆個屬性 來找到游標的位置

二、就是利用 字串的substring 的方式 切割 再拼接;

以下是源**

在vue專案中的**

const areafield = this.$refs.voicearea; // 拿到目標標籤;

// ie瀏覽器

if (document.selection) // 谷歌 firefox 等

else if (areafield.selectionstart || areafield.selectionstart === '0')

areafield.focus();

areafield.selectionstart = startpos + item.text.length;

areafield.selectionend = startpos + item.text.length;

} else

原生寫法

input 輸入框 在自動填充時,背景顏色問題

問題 自動填充前 自動填充後 可以看出,自動填充後,input背景顏色變成了白色,解決辦法 純色陰影覆蓋底色 input webkit autofill再看看,自動填充後的效果 注意 這個方法有個問題,就是input 輸入框,不能有 圓角 border radius 而且只適用於純色背景框。可以看到...

Css 設定input輸入框游標顏色

在使用 input 輸入框時,我們可能會遇到需要給其設定游標顏色的情況。谷歌瀏覽器的預設游標顏色是黑色的,github 上的游標卻是白色,那麼這個用 css 怎麼改變呢?上面描述的情景有兩種實現方式 游標的顏色是繼承自當前輸入框字型的顏色,所以用color屬性即可改變 input 上一種方式已經修改...

input輸入框中游標高度的變化問題

最近在專案中碰到乙個問題 搜尋框的游標高度在有輸入內容和為空時發生很大變化。那麼於是在web上搜尋了一下前輩們是怎麼解決此問題的 首先,先看看問題產生的原因 chrome瀏覽器對游標高度的設定原則為,當沒有內容的時候游標的高度 input的line height的值,當有內容時,游標從input的頂...