Home > Web Front-end > JS Tutorial > How to insert content at a specified location in JS

How to insert content at a specified location in JS

亚连
Release: 2018-06-19 11:31:03
Original
3273 people have browsed it

Below I will share with you a simple example of JS inserting content at a specified position in the text. It has a good reference value and I hope it will be helpful to everyone.

The example is as follows:

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)" />
Copy after login

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

Related articles:

How to install Mint-UI in vue

How to implement collection data traversal display in AngularJS

How to integrate the carousel chart in mint-ui in vue.js

How to implement the disabled child nodes when the parent node is selected in Jstree Also selected

Usage of filters in Vue

Adaptive processing method in Javascript

Webpack packaging configuration (detailed tutorial)

How to load SVG in Webpack

How to implement movement in vue-cli Terminal adaptive

The above is the detailed content of How to insert content at a specified location in JS. For more information, please follow other related articles on the PHP Chinese website!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template