当使用 contenteditable 属性编辑单元格时,光标在数字或英文输入时会跳到最前面,而中文则正常,这是因为数字和英文的文本内容被解释为右对齐,因此光标在最前面。

您可以尝试通过设置 CSS 样式来解决该问题:

td[contenteditable='true'] {
  text-align: left; /* 或者使用 'center' 或 'right' 根据您的需求 */
}

如果这不起作用,您可能需要使用 JavaScript 来设置光标位置。您可以使用以下代码:

function moveCursorToEnd(el) {
  el.focus();
  if (typeof window.getSelection != 'undefined' && typeof document.createRange != 'undefined') {
    var range = document.createRange();
    range.selectNodeContents(el);
    range.collapse(false);
    var sel = window.getSelection();
    sel.removeAllRanges();
    sel.addRange(range);
  } else if (typeof document.body.createTextRange != 'undefined') {
    var textRange = document.body.createTextRange();
    textRange.moveToElementText(el);
    textRange.collapse(false);
    textRange.select();
  }
}

// 在编辑内容时调用该函数
function editGoods(gid, field, value) {
  // ...
  var td = event.target;
  moveCursorToEnd(td);
  // ...
}

这个 moveCursorToEnd 函数将光标移动到元素的末尾,然后您可以在编辑函数中调用它,以确保光标在正确的位置。

contenteditable 编辑框光标跳到数字或英文开头问题解决方法

原文地址: https://www.cveoy.top/t/topic/mEFk 著作权归作者所有。请勿转载和采集!

免费AI点我,无需注册和登录