Home Web Front-end JS Tutorial How to implement JavaScript to record the position of the cursor in the editor_javascript skills

How to implement JavaScript to record the position of the cursor in the editor_javascript skills

May 16, 2016 pm 03:04 PM
javascript Location cursor editor Record

The example in this article describes the implementation method of JavaScript recording the position of the cursor in the editor. Share it with everyone for your reference, the details are as follows:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<body>
<script type="text/javascript">
function $(ele){return document.getElementById(ele)}
//记录编辑器中的位置
   var selection_start;
   var selection_end;
   function savePos(textBox){
   var start=0;
   var end=0;
   if(typeof(textBox.selectionStart) == "number"){ // not ie
    //alert(typeof(textBox.selectionStart) );
    start = textBox.selectionStart;
    end = textBox.selectionEnd;
   }
   else if(document.selection){
    var range = document.selection.createRange();
    if(range.parentElement().id == textBox.id){
     var range_all = document.body.createTextRange();
     range_all.moveToElementText(textBox);
     for (start=0; range_all.compareEndPoints("StartToStart", range) < 0; start++)
      range_all.moveStart('character', 1);
     for (var i = 0; i <= start; i ++){
      if (textBox.value.charAt(i) == '/n')
       start++;
     }
      var range_all = document.body.createTextRange();
      range_all.moveToElementText(textBox);
      for (end = 0; range_all.compareEndPoints('StartToEnd', range) < 0; end ++)
       range_all.moveStart('character', 1);
       for (var i = 0; i <= end; i ++){
        if (textBox.value.charAt(i) == '/n')
         end ++;
       }
     }
    }
    selection_start = start;
    selection_end = end;
   }
</script>
<form action="" id="test">
<textarea id="t" onfocus="savePos(this);$('log').value=selection_start" onkeydown="savePos(this);$('log').value=selection_start" onmousedown="savePos(this);$('log').value=selection_start" onmouseup="savePos(this);$('log').value=selection_start" >
</textarea>
<input type="text" id="log" />
</form>
</body>
</html>

Copy after login

For more JavaScript-related content, please view the special topics on this site: "Summary of JavaScript switching special effects and techniques", "Summary of JavaScript search algorithm techniques", "JavaScript animation Summary of special effects and techniques", "Summary of JavaScript errors and debugging techniques", "Summary of JavaScript data structures and algorithm techniques", "Summary of JavaScript traversal algorithms and techniques " and "Summary of JavaScript mathematical operation usage"

I hope this article will be helpful to everyone in JavaScript programming.

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

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

AI Hentai Generator

AI Hentai Generator

Generate AI Hentai for free.

Hot Article

R.E.P.O. Energy Crystals Explained and What They Do (Yellow Crystal)
3 weeks ago By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Best Graphic Settings
3 weeks ago By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. How to Fix Audio if You Can't Hear Anyone
3 weeks ago By 尊渡假赌尊渡假赌尊渡假赌

Hot Tools

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

Where can I view the records of things I have purchased on Pinduoduo? How to view the records of purchased products? Where can I view the records of things I have purchased on Pinduoduo? How to view the records of purchased products? Mar 12, 2024 pm 07:20 PM

Pinduoduo software provides a lot of good products, you can buy them anytime and anywhere, and the quality of each product is strictly controlled, every product is genuine, and there are many preferential shopping discounts, allowing everyone to shop online Simply can not stop. Enter your mobile phone number to log in online, add multiple delivery addresses and contact information online, and check the latest logistics trends at any time. Product sections of different categories are open, search and swipe up and down to purchase and place orders, and experience convenience without leaving home. With the online shopping service, you can also view all purchase records, including the goods you have purchased, and receive dozens of shopping red envelopes and coupons for free. Now the editor has provided Pinduoduo users with a detailed online way to view purchased product records. method. 1. Open your phone and click on the Pinduoduo icon.

Essential software for C language programming: five good helpers recommended for beginners Essential software for C language programming: five good helpers recommended for beginners Feb 20, 2024 pm 08:18 PM

C language is a basic and important programming language. For beginners, it is very important to choose appropriate programming software. There are many different C programming software options on the market, but for beginners, it can be a bit confusing to choose which one is right for you. This article will recommend five C language programming software to beginners to help them get started quickly and improve their programming skills. Dev-C++Dev-C++ is a free and open source integrated development environment (IDE), especially suitable for beginners. It is simple and easy to use, integrating editor,

Understand the location and structure of pip installation package storage Understand the location and structure of pip installation package storage Jan 18, 2024 am 08:23 AM

To learn more about the storage location of packages installed by pip, you need specific code examples. Pip is a commonly used package management tool in the Python language. It is used to easily install, upgrade and manage Python packages. When using pip to install a package, it will automatically download the corresponding package file from PyPI (Python Package Index) and install it to the specified location. So, where are the packages installed by pip stored? This is a problem that many Python developers will encounter. This article will delve into the location of the packages installed by pip and provide

Location of Origami Bird at Stardome Railway Crocker Film and Television Park Location of Origami Bird at Stardome Railway Crocker Film and Television Park Mar 27, 2024 pm 11:51 PM

There are a total of 20 origami birds in Croaker Film and Television Park on Star Dome Railway. Many players don’t know where the origami birds are in Crocker Film and Television Park. The editor has summarized the locations of each origami bird to help everyone. Search for it, and take a look at this latest summary of the locations of the origami birds in Croaker Film and Television Park for specific content. Guide to the Honkai Star Dome Railway: Origami Bird in Crook Movie Park Location 1, Crook Movie Park 1st Floor 2, and Crook Movie Park 2nd Floor Star Dome Railway

Where is Kuaishou published and how to change its location? How to add a location to a video that has been uploaded? Where is Kuaishou published and how to change its location? How to add a location to a video that has been uploaded? Mar 21, 2024 pm 06:00 PM

As a well-known short video platform in China, Kuaishou provides many creators with opportunities to showcase their talents and share their lives. When uploading a video, some novice creators may be confused about how to change the video posting location. This article will introduce you to how to change the publishing location of Kuaishou videos, and share some tips for Kuaishou video publishing to help you make better use of this platform to showcase your work. 1. Where is Kuaishou published and how to change its location? 1. Publishing interface: In Kuaishou APP, click the &quot;Publish&quot; button to enter the video publishing interface. 2. Location information: In the publishing interface, there is a &quot;Location&quot; column. Click to enter the location selection interface. 3. Change location: In the location selection interface, click the &quot;Location&quot; button to view the current location. If you want to change the location, click &quot;Location&quot;

How to change the location of Gaode Map Home How to change the location of Gaode Map Home Feb 27, 2024 pm 07:31 PM

As a powerful assistant for our daily travels, Amap not only provides accurate navigation services, but also allows users to directly determine their "home location" in a user-friendly manner. It is convenient to check your route home every time. But sometimes the location of our home also needs to be updated, so how can we easily modify the "location of home" in Amap? Next, follow the editor's guide and learn how to modify it together! Amap How to change the location of your home? Answer: [AMAP] - [Settings] - [Three-dot icon] - [Modify location] - [Set location] - [Set as home address]. Specific steps: 1. First open the Amap software, enter the homepage, slide up, find home and click [Settings]; 2. Then in the settings page, we can

Introduction to Go language development tools: a list of essential tools Introduction to Go language development tools: a list of essential tools Mar 29, 2024 pm 01:06 PM

Title: Introduction to Go language development tools: List of essential tools In the development process of Go language, using appropriate development tools can improve development efficiency and code quality. This article will introduce several essential tools commonly used in Go language development, and attach specific code examples to allow readers to understand their usage and functions more intuitively. 1.VisualStudioCodeVisualStudioCode is a lightweight and powerful cross-platform development tool with rich plug-ins and functions.

win11 shutdown location win11 shutdown location Jan 10, 2024 am 09:14 AM

If we are going to be away from the computer for a long time, it is best to shut down the computer to protect it. So where is the shutdown in win11? In fact, generally speaking, just open the start menu and you can find the shutdown button in it. Where to shut down Windows 11: Answer: In the power button of the start menu. 1. First, we click the "Windows Logo" on the bottom taskbar to open the "Start Menu" 2. After opening, you can find the "Power" button in the lower right corner, as shown in the figure. 3. After clicking the power button, you will see "Shutdown", click it to shut down. 4. If the computer cannot be shut down due to special circumstances such as a crash, you can directly press and hold the "power button" on the computer to force a shutdown.

See all articles