웹 프론트엔드 JS 튜토리얼 editor_javascript 스킬에 커서 위치를 기록하는 JavaScript 구현 방법

editor_javascript 스킬에 커서 위치를 기록하는 JavaScript 구현 방법

May 16, 2016 pm 03:04 PM
javascript 위치 커서 편집자 기록

이 글의 예시에서는 에디터에서 커서의 위치를 ​​기록하는 자바스크립트의 구현 방법을 설명합니다. 참고하실 수 있도록 모든 사람과 공유하세요. 자세한 내용은 다음과 같습니다.

<!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>

로그인 후 복사

더 많은 JavaScript 관련 콘텐츠를 보려면 이 사이트의 특별 주제를 참조하세요: "JavaScript 전환 특수 효과 및 기술 요약", "JavaScript 검색 알고리즘 기술 요약" , "JavaScript 애니메이션 특수 효과 및 기법 요약", "JavaScript 오류 및 디버깅 기법 요약", "JavaScript 데이터 구조 및 알고리즘 기법 요약" , "JavaScript 순회 알고리즘 및 기법 요약" 및 "JavaScript 수학적 연산 사용법 요약"

이 기사가 JavaScript 프로그래밍에 종사하는 모든 사람에게 도움이 되기를 바랍니다.

본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

핫 AI 도구

Undresser.AI Undress

Undresser.AI Undress

사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover

AI Clothes Remover

사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

Clothoff.io

AI 옷 제거제

AI Hentai Generator

AI Hentai Generator

AI Hentai를 무료로 생성하십시오.

뜨거운 도구

메모장++7.3.1

메모장++7.3.1

사용하기 쉬운 무료 코드 편집기

SublimeText3 중국어 버전

SublimeText3 중국어 버전

중국어 버전, 사용하기 매우 쉽습니다.

스튜디오 13.0.1 보내기

스튜디오 13.0.1 보내기

강력한 PHP 통합 개발 환경

드림위버 CS6

드림위버 CS6

시각적 웹 개발 도구

SublimeText3 Mac 버전

SublimeText3 Mac 버전

신 수준의 코드 편집 소프트웨어(SublimeText3)

핀둬둬에서 구매한 내역은 어디서 확인할 수 있나요? 구매한 내역은 어떻게 확인하나요? 핀둬둬에서 구매한 내역은 어디서 확인할 수 있나요? 구매한 내역은 어떻게 확인하나요? Mar 12, 2024 pm 07:20 PM

Pinduoduo 소프트웨어는 좋은 제품을 많이 제공하고 언제 어디서나 구입할 수 있으며 각 제품의 품질은 엄격하게 통제되고 모든 제품은 정품이며 우대 쇼핑 할인이 많아 누구나 온라인 쇼핑을 할 수 있습니다. 온라인으로 로그인하려면 휴대폰 번호를 입력하고, 온라인으로 여러 배송 주소와 연락처 정보를 추가하고, 다양한 카테고리의 제품 섹션을 언제든지 확인하고 구매하고 주문하세요. 집을 떠나지 않고도 편리함을 경험할 수 있습니다. 온라인 쇼핑 서비스를 이용하면 구매한 상품을 포함한 모든 구매 기록을 볼 수 있으며, 수십 개의 쇼핑 빨간 봉투와 쿠폰을 무료로 받을 수 있습니다. 이제 편집자가 자세한 온라인 정보를 제공합니다. Pinduoduo 사용자는 구매한 제품 기록을 볼 수 있습니다. 1. 휴대폰을 열고 핀둬둬 아이콘을 클릭하세요.

C 언어 프로그래밍을 위한 필수 소프트웨어: 초보자에게 추천하는 좋은 도우미 5가지 C 언어 프로그래밍을 위한 필수 소프트웨어: 초보자에게 추천하는 좋은 도우미 5가지 Feb 20, 2024 pm 08:18 PM

C 언어는 프로그래밍의 기초이자 중요한 언어입니다. 초보자에게는 적절한 프로그래밍 소프트웨어를 선택하는 것이 매우 중요합니다. 시중에는 다양한 C 프로그래밍 소프트웨어 옵션이 있지만 초보자에게는 자신에게 적합한 것을 선택하는 것이 다소 혼란스러울 수 있습니다. 이 기사에서는 초보자가 빠르게 시작하고 프로그래밍 기술을 향상하는 데 도움이 되는 다섯 가지 C 언어 프로그래밍 소프트웨어를 추천합니다. Dev-C++Dev-C++는 특히 초보자에게 적합한 무료 오픈 소스 통합 개발 환경(IDE)입니다. 간단하고 사용하기 쉬운 통합 편집기,

Stardome Railway Crocker Film and Television Park의 종이접기 새 위치 Stardome Railway Crocker Film and Television Park의 종이접기 새 위치 Mar 27, 2024 pm 11:51 PM

스타 돔 철도의 크로커 영화 및 텔레비전 공원에는 총 20마리의 종이접기 새가 있습니다. 많은 플레이어가 크로커 영화 및 텔레비전 공원의 종이 접기 새가 어디에 있는지 알지 못합니다. 편집자는 모든 사람을 돕기 위해 각 종이 접기 새의 위치를 ​​요약했습니다. . 특정 콘텐츠를 검색하고 Croaker Film and Television Park의 종이접기 새 위치에 대한 최신 요약을 살펴보세요. 홍키돔 레일웨이 안내 스타돔 레일웨이 크로커무비파크 종이접기새 위치 1, 크로커무비파크 1층 2, 크로커무비파크 2층

pip 설치 패키지 저장소의 위치와 구조 이해 pip 설치 패키지 저장소의 위치와 구조 이해 Jan 18, 2024 am 08:23 AM

pip가 설치한 패키지의 저장 위치에 대해 자세히 알아보려면 특정 코드 예제가 필요합니다. Pip는 Python 언어에서 일반적으로 사용되는 패키지 관리 도구로, Python 패키지를 쉽게 설치, 업그레이드 및 관리하는 데 사용됩니다. pip를 사용하여 패키지를 설치하면 PyPI(Python Package Index)에서 해당 패키지 파일을 자동으로 다운로드하여 지정된 위치에 설치합니다. 그렇다면 pip로 설치한 패키지는 어디에 저장되어 있나요? 이는 많은 Python 개발자가 직면하게 되는 문제입니다. 이 기사에서는 pip가 설치한 패키지의 위치를 ​​자세히 살펴보고 다음을 제공합니다.

win11 종료 위치 win11 종료 위치 Jan 10, 2024 am 09:14 AM

오랫동안 컴퓨터를 사용하지 않을 경우 컴퓨터를 종료하여 보호하는 것이 가장 좋습니다. 그렇다면 win11에서 종료는 어디에 있습니까? 실제로 일반적으로 시작 메뉴를 열면 찾을 수 있습니다. 그 안에 종료 버튼이 있습니다. Windows 11을 종료하는 위치: 답변: 시작 메뉴의 전원 버튼에 있습니다. 1. 먼저 하단 작업 표시줄에 있는 "Windows 로고"를 클릭하여 "시작 메뉴"를 엽니다. 2. 열면 그림과 같이 오른쪽 하단에 "전원" 버튼이 있습니다. 3. 전원 버튼을 클릭하면 "종료"가 표시되며 이를 클릭하여 종료합니다. 4. 충돌 등 특수한 상황으로 인해 컴퓨터를 종료할 수 없는 경우 컴퓨터의 "전원 버튼"을 직접 길게 눌러 강제 종료할 수 있습니다.

Kuaishou는 어디에 게시되며 위치를 변경하는 방법은 무엇입니까? 업로드된 동영상에 위치를 추가하는 방법은 무엇입니까? Kuaishou는 어디에 게시되며 위치를 변경하는 방법은 무엇입니까? 업로드된 동영상에 위치를 추가하는 방법은 무엇입니까? Mar 21, 2024 pm 06:00 PM

중국에서 잘 알려진 단편 비디오 플랫폼인 Kuaishou는 많은 창작자들에게 자신의 재능을 선보이고 그들의 삶을 공유할 수 있는 기회를 제공합니다. 영상을 업로드할 때 영상 게시 위치를 어떻게 변경해야 하는지 헷갈려 하시는 초보 크리에이터분들이 있을 수 있습니다. 이 기사에서는 Kuaishou 비디오 게시 위치를 변경하는 방법을 소개하고 Kuaishou 비디오 게시에 대한 몇 가지 팁을 공유하여 이 플랫폼을 더 잘 활용하여 작품을 선보일 수 있도록 도와드립니다. 1. Kuaishou는 어디에 게시되며 위치를 변경하는 방법은 무엇입니까? 1. 게시 인터페이스: Kuaishou 앱에서 "게시" 버튼을 클릭하여 비디오 게시 인터페이스로 들어갑니다. 2. 위치 정보: 게시 인터페이스에는 '위치' 열이 있습니다. 클릭하면 위치 선택 인터페이스로 들어갑니다. 3. 위치 변경: 위치 선택 인터페이스에서 '위치' 버튼을 클릭하면 현재 위치를 볼 수 있습니다. 위치를 변경하려면 "위치"를 클릭하세요.

Go 언어 개발 도구 소개: 필수 도구 목록 Go 언어 개발 도구 소개: 필수 도구 목록 Mar 29, 2024 pm 01:06 PM

제목: Go 언어 개발 도구 소개: 필수 도구 목록 Go 언어 개발 과정에서 적절한 개발 도구를 사용하면 개발 효율성과 코드 품질을 향상시킬 수 있습니다. 이 기사에서는 Go 언어 개발에 일반적으로 사용되는 몇 가지 필수 도구를 소개하고 독자가 해당 도구의 사용법과 기능을 보다 직관적으로 이해할 수 있도록 구체적인 코드 예제를 첨부합니다. 1.VisualStudioCodeVisualStudioCode는 풍부한 플러그인과 기능을 갖춘 가볍고 강력한 크로스 플랫폼 개발 도구입니다.

라스트 시대 아레나는 어디에 있나요? 라스트 시대 아레나는 어디에 있나요? Mar 07, 2024 pm 08:16 PM

'라스트 에이지'에서는 플레이어가 게임 모드, 챌린지 모드, 아레나 등 다양한 모드에서 플레이할 수 있습니다. Arena는 게임의 궁극적인 게임플레이로, 플레이어가 선택할 수 있는 두 가지 모드를 제공합니다. 마지막 시대의 투기장은 어디에 있습니까? 답변: 투기장은 최종 게임이며 구체적인 위치는 챔피언의 문입니다. 아레나 키 또는 메모리 아레나 키를 획득해야 합니다. 마우스 오른쪽 버튼을 클릭하면 월드맵이 표시되며 챔피언스 게이트의 특정 위치를 찾을 수 있습니다. 아레나는 아레나 챔피언십 모드와 엔드리스 아레나 모드의 두 가지 주요 모드로 나뉩니다. 전자에는 40개의 적군과 엄선된 보상이 포함되어 있으며, 항상 아레나 챔피언과의 전투로 마무리됩니다. 아레나 챔피언십 모드에는 4개의 스테이지가 있습니다. 난이도가 높을수록 보상도 좋아집니다. 엔드리스 아레나(Endless Arena)는 무한 웨이브 모드로, 최고 점수를 획득한 도전자가 점차 난이도를 높여갑니다.

See all articles