首頁 >web前端 >js教程 >在JS中如何實現指定位置插入內容

在JS中如何實現指定位置插入內容

亚连
亚连原創
2018-06-19 11:31:033286瀏覽

下面我就為大家分享一篇JS實作在文字指定位置插入內容的簡單範例,具有很好的參考價值,希望對大家有所幫助。

實例如下:

function insertAtCursor(myField, myValue) { 
 
 //IE 浏览器 
 if (document.selection) { 
  myField.focus(); 
  sel = document.selection.createRange(); 
  sel.text = myValue; 
  sel.select(); 
 } 
 
 //FireFox、Chrome等 
 else if (myField.selectionStart || myField.selectionStart == '0') { 
  var startPos = myField.selectionStart; 
  var endPos = myField.selectionEnd; 
 
  // 保存滚动条 
  var restoreTop = myField.scrollTop; 
  myField.value = myField.value.substring(0, startPos) + myValue + myField.value.substring(endPos, myField.value.length); 
  
  if (restoreTop > 0) { 
  myField.scrollTop = restoreTop; 
  } 
  
  myField.focus(); 
  myField.selectionStart = startPos + myValue.length; 
  myField.selectionEnd = startPos + myValue.length; 
 } else { 
  myField.value += myValue; 
  myField.focus(); 
 } 
} 
<textarea id="textarea" style="width: 386px; height: 260px"> 
</textarea> 
<input type="text" id="text" /> 
<input type="button" value="插入" onclick="insertAtCursor(document.getElementById(&#39;textarea&#39;),document.getElementById(&#39;text&#39;).value)" />

上面是我整理給大家的,希望今後會對大家有幫助。

相關文章:

在vue中如何安裝Mint-UI

#在AngularJS如何實作集合資料遍歷顯示

#在vue.js中如何整合mint-ui裡的輪播圖

在Jstree中如何實作選取父節點時被停用的子節點也會選取

在Vue中關於過濾器filters的用法

在Javascript中自適應處理方法

webpack打包設定(詳細教學)

##在Webpack中如何載入SVG

在vue-cli中如何實現移動端自適應

以上是在JS中如何實現指定位置插入內容的詳細內容。更多資訊請關注PHP中文網其他相關文章!

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