代码之家 › 专栏 › 技术社区 › Basj

在ContentEditable div上的光标前检测并替换单词[重复]

contenteditable html5 html javascript

Basj · 技术社区 · 7 年前

这个问题已经有了答案:

Detect the last written word when typing TAB in a textarea or contenteditable div 2答

如何在 contenteditable 把它换成别的东西? 这个 works for a textarea 但对于此contentEditable div不适用:

document.getElementById('a').addEventListener('keydown', e => {
  if (e.which == 9) {
    e.preventDefault();
    let endingIndex = e.target.selectionStart;     // does not work for contenteditable
    let startingIndex = endingIndex && endingIndex - 1;
    let value = e.target.innerHTML;
    let regex = /[ ]/;

    while(startingIndex){
      if(regex.test(value[startingIndex])){
        ++startingIndex;
        break;
      }
      --startingIndex;
    }
    console.log('word before cursor: ' + value.substring(startingIndex, endingIndex));
  }
  
});

<div contenteditable id="a">Please click here and hit TAB, the word before cursor should be replaced by something else.</div>

2 回复 | 直到 7 年前

Anton Guz 7 年前

那是因为 selectionStart 是一个只有 HTMLInputElement 对象类型。也许你想看看这个 gist 或使用 Range 直接接口。

Basj 7 年前

使用 gist 根据antonguz的回答,这对contenteditable都有效 div 和 textarea :

function getPos(elt) {
    if (elt.isContentEditable) {  // for contenteditable
        elt.focus();
        let _range = document.getSelection().getRangeAt(0);
        let range = _range.cloneRange();
        range.selectNodeContents(elt);
        range.setEnd(_range.endContainer, _range.endOffset)
        return range.toString().length;
    } else {  // for texterea/input element
        return elt.selectionStart;
    }
}

function setPos(elt, pos) {
    if (elt.isContentEditable) {  // for contenteditable
        elt.target.focus();
        document.getSelection().collapse(elt.target, pos);
    } else {  // for texterea/input element
        elt.target.setSelectionRange(pos, pos);
    }
}

function insertText(content) {
    document.execCommand('insertText', false, content) 
}

document.addEventListener("keydown", function(e) {
    if (e.target.tagName.toLowerCase() === 'textarea' || e.target.isContentEditable)
    {        
        if (e.keyCode == 9) {
            e.preventDefault();
            console.log(getPos(e.target));
            
            let endingIndex = getPos(e.target);
            let startingIndex = endingIndex && endingIndex - 1;
            let value = e.target.isContentEditable ? e.target.innerHTML : e.target.value;
            let regex = /[ ]/;

            while (startingIndex) {
                if (regex.test(value[startingIndex])) {
                    ++startingIndex;
                    break;
                }
                --startingIndex;
            }
            console.log('word before cursor: ' + value.substring(startingIndex, endingIndex));
        }
    }
});

<div contenteditable>Please click here and hit TAB, the word before cursor should be replaced by something else.</div>

<textarea></textarea>

推荐文章

code-geek · Jquery根据单选按钮选择隐藏或显示文本字段

8 月前

Jamie · 在CSS链接的文件名中添加Jinja占位符

8 月前

ptownbro · 重叠分区标签,同时保持以下所有分区和内容就位

8 月前

Luke Frost IEng MIMechE · Bootstrap 5.3在Div中的项目位置没有如我所期望的那样显示

8 月前

Reegan · 使用Angular ngFor指令在html中渲染嵌套对象值

8 月前

wqyutv · 当找不到文件时,任何破坏错误的东西都不会出现,我该怎么解决这个问题?

8 月前

user29519291 · 为不同的变量创建一个带有可重用Click函数的简单菜单

9 月前

Gukkey · 在React中明确隐藏日期类型输入后,如果我单击父div,如何显示日期选择器?

9 月前

Lorenzo Bertolaccini · 在Angular项目中通过对话框后,在控制台中显示但在HTML中不显示的数据数组

9 月前

john Rizzo · 按钮背景颜色、悬停和活动状态存在问题

9 月前