当前位置: 首页 > 面试题库 >

JavaScript获取文本输入字段中的光标位置(以字符为单位)

欧阳洲
2023-03-14
问题内容

如何从输入字段中获得插入符的位置?

我已经通过Google找到了一些零散的信息,但是没有任何防弹证据。

基本上像jQuery插件之类的东西是理想的,所以我可以简单地做

$("#myinput").caretPosition()

问题答案:

更新更容易:

使用时selectionStart,它与所有主要浏览器兼容。

document.getElementById('foobar').addEventListener('keyup', e => {
  console.log('Caret at: ', e.target.selectionStart)
})
<input id="foobar" />

更新:仅当未定义类型或type="text"在输入上时,此方法才有效。

旧答案:

找到了这个解决方案。不是基于jquery的,但是将其集成到jquery中没有问题:

/*
** Returns the caret (cursor) position of the specified text field (oField).
** Return value range is 0-oField.value.length.
*/
function doGetCaretPosition (oField) {

  // Initialize
  var iCaretPos = 0;

  // IE Support
  if (document.selection) {

    // Set focus on the element
    oField.focus();

    // To get cursor position, get empty selection range
    var oSel = document.selection.createRange();

    // Move selection start to 0 position
    oSel.moveStart('character', -oField.value.length);

    // The caret position is selection length
    iCaretPos = oSel.text.length;
  }

  // Firefox support
  else if (oField.selectionStart || oField.selectionStart == '0')
    iCaretPos = oField.selectionDirection=='backward' ? oField.selectionStart : oField.selectionEnd;

  // Return results
  return iCaretPos;
}


 类似资料:
  • 问题内容: 如何从输入字段中获得插入符的位置? 我已经通过Google找到了一些零散的信息,但是没有任何防弹证据。 基本上像jQuery插件之类的东西是理想的,所以我可以简单地做 问题答案: 找到了这个解决方案。不是基于jquery的,但是将其集成到jquery中没有问题:

  • 我有一个文本框(EditText),当我插入一个文本和一个按钮时,应该计算该文本的长度并将其显示在另一个文本框中,我应该如何对该按钮进行编码

  • 问题内容: 如何以html形式居中输入字段的占位符对齐方式? 我正在使用以下代码,但是它不起作用: CSS-> HTML-> 问题答案: 如果只想更改占位符样式

  • 我正在生成一个带有javascript数据源的数据表。数据是通过对nodejs的ajax调用返回的,nodejs查询sqlserverdb表并返回两列,都是数字数据。我又添加了两列来保存输入字段,默认值为0,以便用户输入数字,从而增加/减少A/B列中的值。 这渲染得很好,我可以修改单元格中输入字段中的文本。在表外有一个单独的输入字段,用户可以单击该字段“提交更改”,这将调用一个javascript

  • 问题内容: 我有以下功能,将选择器添加到搜索输入中作为高级选项,就像堆栈溢出高级搜索一样。 当您单击要搜索的内容时,它会添加一个前缀。请参阅下面的Jquery: 如何处理以上内容,使焦点也集中在#search输入上,将胡萝卜(闪烁的文本插入光标)放在插入的文本/值的末尾?例如。 HC:<-添加到我的搜索输入中的值,我想在此处设置光标: 问题答案: 您可以使用Range API的一部分来执行此操作,

  • 问题内容: 我正在使用JavaScript进行搜索。我会使用一种表格,但是它弄乱了我页面上的其他内容。我有此输入文本字段: 这是我的JavaScript代码: 如何从文本字段获取值到JavaScript? 问题答案: 有多种方法可直接获取输入文本框值(无需将输入元素包装在表单元素内): 方法1: 得到所需盒子的价值 例如, 注意: 方法2、3、4和6返回元素的集合,因此请使用[whole_numb