如何使用 JavaScript 查找 INPUT 和 TEXTAREA 插入符号位置坐标？

Posted 2023-04-18

【中文标题】如何使用 JavaScript 查找 INPUT 和 TEXTAREA 插入符号位置坐标？

【英文标题】：How To Find INPUT And TEXTAREA Caret Position Coordinates Using JavaScript?

【发布时间】：2016-12-05 17:57:06

【问题描述】：

我试图在 javascript html DOM Events 之类的 HTML DOM Events 函数的 type="text" 的 TextArea 或 Input 中找出相对于文档（整个网页）的插入符号位置坐标987654328@、onkeypress、onkeyup 等...

为此，我创建了以下 HTML...

<input dir="rtl" type="text" id="TEST_INPUT" onkeydown="myFunction(this)"></input>
<textarea dir="rtl" id="TEST_TEXTAREA" onkeyup="myFunction(this)"></textarea>

并运行下面的 JavaScript...

<script type="text/javascript">
/* Main Function
----------------------------------------------- */
function myFunction(Desired_ID)
    // Extra Codes Here ETC...
    document.getElementById(Desired_ID.id).style.backgroundColor = "red";
    // Extra Codes Here ETC...
    var coords = getSelectionCoords(Desired_ID);
    alert(coords.left + ", " + coords.top);
    // Extra Codes Here ETC...


/* Get Caret XY Coordinate
----------------------------------------------- */
function getSelectionCoords(Desired_ELEMENT) 
// ------>>> What To Do Here Is The Problem To Cover All Browsers <<<------
return left:x,top:y;

</script>

我在 *** 中搜索了很多，但是大家在使用或运行时都会遇到一些问题，下面分享...

http://jsfiddle.net/dandv/aFPA7/ http://jsfiddle.net/mLocgoeq/ http://jsfiddle.net/NFJ9r/132/

我的工作 DEMO 在 https://jsfiddle.net/qjkkqdg2/ 我正在锻炼，所以您可以分享任何提示或想法来完成它...???

【参考方案1】：

在继续努力和尝试之后，我找到了我想要的答案，在这里我以代码的形式在下面分享它，您也可以在https://jsfiddle.net/qjkkqdg2/1/ 看到...

<script type="text/javascript">
/* Main Function
----------------------------------------------- */
function myFunction(Desired_ID)
    // Extra Codes Here ETC...
    document.getElementById(Desired_ID.id).style.backgroundColor = "red";
    // Extra Codes Here ETC...
    var coordinates = getCaretCoordinates(Desired_ID, Desired_ID.selectionStart);
    alert(coordinates.left + ", " + coordinates.top);
    // Extra Codes Here ETC...


/* Get Caret XY Coordinate
----------------------------------------------- */
/* jshint browser: true */
(function () 

// The properties that we copy into a mirrored div.
// Note that some browsers, such as Firefox,
// do not concatenate properties, i.e. padding-top, bottom etc. -> padding,
// so we have to do every single property specifically.
var properties = [
  'direction',  // RTL support
  'boxSizing',
  'width',  // on Chrome and IE, exclude the scrollbar, so the mirror div wraps exactly as the textarea does
  'height',
  'overflowX',
  'overflowY',  // copy the scrollbar for IE

  'borderTopWidth',
  'borderRightWidth',
  'borderBottomWidth',
  'borderLeftWidth',
  'borderStyle',

  'paddingTop',
  'paddingRight',
  'paddingBottom',
  'paddingLeft',

  // https://developer.mozilla.org/en-US/docs/Web/CSS/font
  'fontStyle',
  'fontVariant',
  'fontWeight',
  'fontStretch',
  'fontSize',
  'fontSizeAdjust',
  'lineHeight',
  'fontFamily',

  'textAlign',
  'textTransform',
  'textIndent',
  'textDecoration',  // might not make a difference, but better be safe

  'letterSpacing',
  'wordSpacing',

  'tabSize',
  'MozTabSize'

];

var isBrowser = (typeof window !== 'undefined');
var isFirefox = (isBrowser && window.mozInnerScreenX != null);

function getCaretCoordinates(element, position, options) 
  if(!isBrowser) 
    throw new Error('textarea-caret-position#getCaretCoordinates should only be called in a browser');
  

  var debug = options && options.debug || false;
  if (debug) 
    var el = document.querySelector('#input-textarea-caret-position-mirror-div');
    if ( el )  el.parentNode.removeChild(el); 
  

  // mirrored div
  var div = document.createElement('div');
  div.id = 'input-textarea-caret-position-mirror-div';
  document.body.appendChild(div);

  var style = div.style;
  var computed = window.getComputedStyle? getComputedStyle(element) : element.currentStyle;  // currentStyle for IE < 9

  // default textarea styles
  style.whiteSpace = 'pre-wrap';
  if (element.nodeName !== 'INPUT')
    style.wordWrap = 'break-word';  // only for textarea-s

  // position off-screen
  style.position = 'absolute';  // required to return coordinates properly
  if (!debug)
    style.visibility = 'hidden';  // not 'display: none' because we want rendering

  // transfer the element's properties to the div
  properties.forEach(function (prop) 
    style[prop] = computed[prop];
  );

  if (isFirefox) 
    // Firefox lies about the overflow property for textareas: https://bugzilla.mozilla.org/show_bug.cgi?id=984275
    if (element.scrollHeight > parseInt(computed.height))
      style.overflowY = 'scroll';
   else 
    style.overflow = 'hidden';  // for Chrome to not render a scrollbar; IE keeps overflowY = 'scroll'
  

  div.textContent = element.value.substring(0, position);
  // the second special handling for input type="text" vs textarea: spaces need to be replaced with non-breaking spaces - http://***.com/a/13402035/1269037
  if (element.nodeName === 'INPUT')
    div.textContent = div.textContent.replace(/\s/g, '\u00a0');

  var span = document.createElement('span');
  // Wrapping must be replicated *exactly*, including when a long word gets
  // onto the next line, with whitespace at the end of the line before (#7).
  // The  *only* reliable way to do that is to copy the *entire* rest of the
  // textarea's content into the <span> created at the caret position.
  // for inputs, just '.' would be enough, but why bother?
  span.textContent = element.value.substring(position) || '.';  // || because a completely empty faux span doesn't render at all
  div.appendChild(span);

  var coordinates = 
    top: span.offsetTop + parseInt(computed['borderTopWidth']),
    left: span.offsetLeft + parseInt(computed['borderLeftWidth'])
  ;

  if (debug) 
    span.style.backgroundColor = '#aaa';
   else 
    document.body.removeChild(div);
  

  return coordinates;


if (typeof module != 'undefined' && typeof module.exports != 'undefined') 
  module.exports = getCaretCoordinates;
 else if(isBrowser)
  window.getCaretCoordinates = getCaretCoordinates;


());
</script>

这个ID代码是https://github.com/component/textarea-caret-position。谢谢他...

限制：

它只给出元素的坐标，但我想获得整个文档的坐标...

为了解决这个限制，我添加了另一个函数，它会找出元素相对于整个文档的坐标，所以只需添加下面的函数......

<script type="text/javascript">
/* Get Element XY Coordinate
----------------------------------------------- */
function getElementCoords(elem)  // crossbrowser version
    var box = elem.getBoundingClientRect();

    var body = document.body;
    var docEl = document.documentElement;

    var scrollTop = window.pageYOffset || docEl.scrollTop || body.scrollTop;
    var scrollLeft = window.pageXOffset || docEl.scrollLeft || body.scrollLeft;

    var clientTop = docEl.clientTop || body.clientTop || 0;
    var clientLeft = docEl.clientLeft || body.clientLeft || 0;

    var top  = box.top +  scrollTop - clientTop;
    var left = box.left + scrollLeft - clientLeft;

    return  top: Math.round(top), left: Math.round(left) ;

</script>

所以最后我们的 Main Function 现在将是......

<script type="text/javascript">
/* Main Function
----------------------------------------------- */
function myFunction(Desired_ID)
    // Extra Codes Here ETC...
    document.getElementById(Desired_ID.id).style.backgroundColor = "red";
    // Extra Codes Here ETC...
    var coordinates = getCaretCoordinates(Desired_ID, Desired_ID.selectionStart);
    var elementCoordinates = getElementCoords(Desired_ID);
    var topPosition = coordinates.top + elementCoordinates.top;
    var leftPosition = coordinates.left + elementCoordinates.left;
    alert(leftPosition + ", " + topPosition);
    // Extra Codes Here ETC...

</script>

所以最后我们的最后一个演示是https://jsfiddle.net/qjkkqdg2/2/