光标操作知多少？（input textarea 操作）

最新推荐文章于 2024-03-27 10:53:30 发布

懒虫一个V

最新推荐文章于 2024-03-27 10:53:30 发布

阅读量5.5k

点赞数 1

分类专栏： Javascript

本文链接：https://blog.csdn.net/spy19881201/article/details/38360613

版权

Javascript 专栏收录该内容

35 篇文章 1 订阅

订阅专栏

本文带你领略input textarea 光标操作：

首先，对于ie和非ie要特殊初速，前端常识！

ie： range.moveStart("character", start);
range.moveEnd('character', index);

非IE：el.setSelectionRange(start, end);

非IE的调用方式简单，不多解释；IE下的操作解释下，ie下有个叫textRange的东西，用来控制光标的相关操作的，可以参考这里（http://msdn.microsoft.com/en-us/library/ie/ms535872(v=vs.85).aspx）

在操作ie下的textarea时，参考了这篇美文 http://blog.csdn.net/qimiguang/article/details/10474189 赞！

这里附上源码：

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html;charset=UTF-8"/>
  <title>input 操作光标在最后</title>
</head>
<body>
<div style=" margin: auto;width: 800px">
  <div>
    <input type="radio" name="radio" checked οnclick="radioChange(event);" value="1">
    <input id="name" type="text" value="my name is Willian smith" style="width: 200px">
    <input type="radio" name="radio" οnclick="radioChange(event);" value="2">
    <textarea id="content" style="width: 200px">my name is Willian smith</textarea>
  </div>
  <div>

    <button οnclick="focusFirstFun();">光标在最前面</button>
    <button οnclick="focusEndFun();">光标在最后面</button>
    <button οnclick="focusIndexFun();">光标在第二个字符之后</button>

    <button οnclick="focusPosFun();">光标位置</button>
    <button οnclick="focusBeforeFun();">光标前移</button>
    <button οnclick="focusNextFun();">光标后移</button>
  </div>

  <div>
    <button οnclick="focus5Fun();">选中前五个字符</button>

  </div>
  <div>
    <p>光标位置：<span id="cursorLabel"></span></p>

  </div>
</div>


<script type="text/javascript">
var cursorLabel = document.getElementById('cursorLabel'),
        el = document.getElementById('name');

//  el = document.getElementById('content');

function radioChange(event) {
  var radio = event.target;
  if (radio.value == '1') {
    el = document.getElementById('name');
  } else if (radio.value == '2') {
    el = document.getElementById('content');
  }
}

function focusFirstFun() {
  focusFirst(el);
}

function focusEndFun() {
  focusEnd(el);
}

function focusIndexFun() {
  focusIndex(el, 2)
}

function focus5Fun() {
  focus(el, 0, 5);
}

function focusPosFun() {
  cursorLabel.innerHTML = focusPos(el);
}

function focusBeforeFun() {
  focusMove(el, -1);
}

function focusNextFun() {
  focusMove(el, 1);
}

/***************通用接口**********************/

function focusFirst(el) {
  focus(el, 0, 0);
}

function focusIndex(el, start) {
  focus(el, start);
}

function focusEnd(el) {
  focus(el, el.value.length, el.value.length);
}

function focus(el, start, index) {
  start = start === undefined ? 0 : start;
  index = index === undefined ? 0 : index;

  if (el.createTextRange) {//IE浏览器
    var range = el.createTextRange();
    range.collapse(true);
    range.moveStart("character", start);
    range.moveEnd('character', index);
    range.select();
  } else {//非IE浏览器
    var end = index === 0 ? start : index;
    el.setSelectionRange(start, end);
    el.focus();
  }
}

function focusMove(el, index) {
  if (el.createTextRange) {//IE浏览器
    el.focus();
    var range = document.selection.createRange();
    range.collapse(false);
    var tempRange = document.selection.createRange();
    if (el.tagName.toLowerCase() == 'textarea') {
      var pos = getCursorPosition(el);

      if (pos.start <= 0) {
        index = 0;
      }
    } else { //input
      tempRange.setEndPoint("StartToStart", el.createTextRange());
      if (tempRange.text.length < 0) {
        index = 0;
      }
    }

    range.move("character", index);
    range.select();

  } else {//非IE浏览器
    var newPos = el.selectionStart + index;
    var start = end = newPos <= 0 ? 0 : newPos;
    el.setSelectionRange(start, end);
    el.focus();
  }
}


function focusPos(el) {
  var start = 0;
  if (el.createTextRange) {//IE浏览器
    el.focus();
    var range = document.selection.createRange();
    range.collapse(false);
    var tempRange = document.selection.createRange();
    if (el.tagName.toLowerCase() == 'textarea') {
      var pos = getCursorPosition(el);
      start = pos.start <= 0 ? 0 : pos.start;

    } else { //input
      tempRange.setEndPoint("StartToStart", el.createTextRange());
      start = tempRange.text.length;
    }


  } else {//非IE浏览器
    start = el.selectionStart;
  }

  if (window.console) {
    console.log(start);
  }

  return start;
}


/**
 * getCursorPosition Method
 *
 * Created by Blank Zheng on 2010/11/12.
 * Copyright (c) 2010 PlanABC.net. All rights reserved.
 *
 * The copyrights embodied in the content of this file are licensed under the BSD (revised) open source license.
 */
function getCursorPosition(textarea) {
  var rangeData = {text: "", start: 0, end: 0 };
  textarea.focus();
  if (textarea.setSelectionRange) { // W3C
    rangeData.start = textarea.selectionStart;
    rangeData.end = textarea.selectionEnd;
    rangeData.text = (rangeData.start != rangeData.end) ? textarea.value.substring(rangeData.start, rangeData.end) : "";
  } else if (document.selection) { // IE
    var i,
            oS = document.selection.createRange(),
    // Don't: oR = textarea.createTextRange()
            oR = document.body.createTextRange();
    oR.moveToElementText(textarea);

    rangeData.text = oS.text;
    rangeData.bookmark = oS.getBookmark();

    // object.moveStart(sUnit [, iCount])
    // Return Value: Integer that returns the number of units moved.
    for (i = 0; oR.compareEndPoints('StartToStart', oS) < 0 && oS.moveStart("character", -1) !== 0; i++) {
      // Why? You can alert(textarea.value.length)
      if (textarea.value.charAt(i) == '\n') {
        i++;
      }
    }
    rangeData.start = i;
    rangeData.end = rangeData.text.length + rangeData.start;
  }

  return rangeData;
}
/**
 * setCursorPosition Method
 *
 * Created by Blank Zheng on 2010/11/12.
 * Copyright (c) 2010 PlanABC.net. All rights reserved.
 *
 * The copyrights embodied in the content of this file are licensed under the BSD (revised) open source license.
 */
function setCursorPosition(textarea, rangeData) {
  if (!rangeData) {
    alert("You must get cursor position first.")
  }
  if (textarea.setSelectionRange) { // W3C
    textarea.focus();
    textarea.setSelectionRange(rangeData.start, rangeData.end);
  } else if (textarea.createTextRange) { // IE
    var oR = textarea.createTextRange();
    // Fixbug :
    // In IE, if cursor position at the end of textarea, the setCursorPosition function don't work
    if (textarea.value.length === rangeData.start) {
      oR.collapse(false)
      oR.select();
    } else {
      oR.moveToBookmark(rangeData.bookmark);
      oR.select();
    }
  }
}
</script>
</body>
</html>