关于javascript:用户输入-文本插入

7次阅读

共计 7188 个字符，预计需要花费 18 分钟才能阅读完成。

输出的键间接落入可输出 DOM 元素，为间接输出。

E.g. 英文输出。

输出的键值不会间接落入可输出 DOM 元素，有一个两头态，为间接输出。

E.g. 中文输出。

因为任何输出都会触发 input，而 输出中文的时候才触发 compositionstart 和compositionend，能够以此来辨别中英文输出。

`e.keyCode`在中英文下不同的体现

e.keyCode在英文模式下输出，能获取正确的键值；
e.keyCode在中文模式下输出，键入任何值都输入229；

Windows将所有未辨认的设施输出都设置为 VK_PROCESSKEY 229，浏览器的 event.keyCode 复用了这一标准，因而在中文输出过程中，无论按下什么按键，返回的 event.keyCode 永远是229。

因为任何输出都会触发 input，而输出中文的时候才触发compositionstart 和compositionend，能够以此来辨别中英文输出。

监听 input 事件时，输出值时，e.data有值，删除值时，e.data === undefined，能够以此判断输出、删除。

compositionstart、compositionupdate和 compositionend 只能通过 window.addEventListener('') 监听，on*监听有效。

保障输出的复杂度与灵活性，个别选用一般标签而非文本域做输出容器。

`contenteditable`标签属性

属性值如下：

contenteditable=""contenteditable="events"contenteditable="caret"
// 纯文本输出：// 换行不会生成 <div>，应用 '\n' 或 inputType === 'insertLineBreak' 判断
// 复制黏贴不会带有格局
contenteditable="plaintext-only" 

contenteditable="true" // 换行会生成 <div> 包裹
contenteditable="false"

`user-modify`CSS 属性

user-modify能够在挪动端应用，以及，只须要兼顾 webkit 内容的桌面网页我的项目。

-webkit-user-modify: read-only;  // 一般元素的默认状态
-webkit-user-modify: read-write; // 能够输出富文本
-webkit-user-modify: write-only;
-webkit-user-modify: read-write-plaintext-only // 只能够输出纯文本

contenteditable和 user-modify 的旧版本浏览器支持性差
contenteditable是归属于 W3C 规范，全浏览器反对；而 user-modify 浏览器有本人的实现，非标准，应用须要追加浏览器前缀-webkit-、-moz-…；
contenteditable和 user-modify 都能够实现对拷贝的富文本过滤格局；

两个概念抉择 selection、范畴range

const selection = getSelection()
const range = selection.getRangeAt(0) // 获取光标位的选中范畴
const range1 = new Range()  // 自定义选中范畴，应用时须要 selection.addRange(range1)

selection是治理 range 的汇合，除了 Firfox 中 rangeCount > 1，其它浏览器的实现，selection最多只有一个range
range是文本抉择范畴的终点和起点

range文本抉择规定

通过 range.setStart(node, offset)、range.setEnd(node, offset) 设置范畴，依据 node 节点的类型 nodeType 不同分属不同的状况
- node 为文本节点 nodeType === 3，偏移量offset 为文本中的地位。
- node 为元素节点 nodeType === 1，偏移量offset 为指定元素子节点 node.childNodes 的地位
- 其中范畴终点、起点的 node 容许不同节点
- 其中范畴终点、起点的定位位于偏移量 offset 之前
通过 console.log(range) 即可查看选中的文本；静默调用 toString() 办法返回内容；
通过 range.startContainer、range.startOffset 查看以后范畴的终点归属元素及偏移量
通过 range.endContainer、range.endOffset 查看以后范畴的起点归属元素及偏移量
通过range.insertNode(node)，在范畴的起始处将 node 插入文档
通过 range.extractContents()、range.deleteContents 从文档中删除范畴内容
通过 range.surroundContents(node)，自定义元素节点包裹抉择的范畴， 抉择的范畴若有元素节点，元素节点必须闭合
通过 selection.empty() 能够清空抉择

应用 selection.addRange(range) 增加范畴时，如果抉择已存在，则首先应用 selection.removeAllRanges() 将其清空。而后增加范畴。否则，除 Firefox 外的所有浏览器都将疏忽新范畴。 其中，通过 range.setStart、range.setEnd 调整范畴的状况，不用思考清空selection

`Selection`类型

selection.type

None: 以后没有抉择。
Caret: 选区已折叠（即光标在字符之间，并未处于选中状态）。
Range: 抉择的是一个范畴。

// 形式 1. 只反对 Android、PC
range.setStart(baseNode, 1)
range.setEnd(baseNode, 1)
range.collapse()

// 形式 2. 只反对 Android、PC
range.setEndAfter(baseNode)
selection.collapseToEnd()

// 形式 3. 
selection.setPosition(node, offset)

// 形式 4. 反对 IOS，仅用于通过 range.extractContents()提取的 documentFrag 文本
selection.removeAllRanges()
selection.addRange(range)
range.setStart(cloneNode, cloneNode.endOffset)
range.setEnd(cloneNode, cloneNode.endOffset)
selection.collapseToEnd()

// 形式 4. 反对全平台，IOS 不可用于通过 range.extractContents()提取的 documentFrag 文本
selection.extend(baseNode, 1)
selection.collapseToEnd()

// 光标定位文本后：通过 range.extractContents()提取的 documentFrag 文本
try {
  // 安卓端
  selection.extend(cloneNode, 1)
  selection.collapseToEnd()} catch (e) {
  // Iphone 端
  selection.removeAllRanges()
  selection.addRange(range)
  range.setStart(cloneNode, cloneNode.endOffset)
  range.setEnd(cloneNode, cloneNode.endOffset)
  selection.collapseToEnd()}

    const {selection, range} = this.lastSelection
    this.editableEle.focus()
    const textNode = range.startContainer
    range.setStart(textNode, range.endOffset)
    range.setEnd(textNode, range.endOffset)
    const spanNode1 = document.createTextNode(' ')
    const spanNode2 = document.createElement('span')
    spanNode2.className = 'tag'
    spanNode2.innerHTML = '#'
    let frag = document.createDocumentFragment(), lastNode = spanNode2
    frag.appendChild(spanNode1)
    frag.appendChild(spanNode2)
    range.insertNode(frag)
    // IPhone 下有时候会报错，采纳下方代码代替
    selection.extend(lastNode, 1)
    selection.collapseToEnd()

IOS 下，在标签后紧跟着增加节点，selection.extend(node, 1)敞开范畴报错解决方案

whetherEndTag (prefixer) {if (prefixer === ' ') {const selection = getSelection()
      const range = selection.getRangeAt(0)
      const node = range.startContainer
      if (node.parentNode && node.parentNode.className === 'tag') {range.setStart(node, range.endOffset - 1)
        range.setEnd(node, range.endOffset)
        const cloneNode = range.extractContents()
        range.setStartAfter(node.parentNode, selection.endOffset)
        range.setEndAfter(node.parentNode, selection.endOffset)
        range.collapse(true)
        range.insertNode(cloneNode)
        // 安卓、IOS 不兼容
        try {
          // 安卓端
          selection.extend(cloneNode, 1)
          selection.collapseToEnd()} catch (e) {
          // Iphone 端
          selection.removeAllRanges()
          selection.addRange(range)
          range.setStart(cloneNode, cloneNode.endOffset)
          range.setEnd(cloneNode, cloneNode.endOffset)
          selection.collapseToEnd()}
      }
    }
}

间接输出

  // 间接输出
  onKeyupListener (e) {this.check_charcount(e)
  },
  onKeydownListener (e) {this.check_charcount(e)
  },
  check_charcount (e, max = 100) {if(e.which != 8 && this.editableEle.textContent.length > max) {e.preventDefault()
    }
  }

间距输出

  // 中英文，在 input、compositionEnd 事件中调用
  ...
  data () {
      return {CNEnd: true}
  }
  ...
  compositionstart (e) {this.CNEnd = false},
  compositionend (e) {
      this.CNEnd = true
      this.limitInput(e)
  }
  ...
    limitInput(event) {
        let _words = this.editableEle.textContent
        let _this = this.editableEle
        if (this.CNEnd) {
          let num = _words.length
    
          if (num >= 100) {
            num = 100
            if (_this.spillOver) {event.target.innerText = this.fullContent} else {event.target.innerText = _words.substring(0, 100)
              _this.spillOver = true
              this.fullContent = _words.substring(0, 100)
            }
            Toast('100 以内')
          } else {
            _this.spillOver = false
            this.fullContent = ''
          }
          const sel = window.getSelection()
          let range = document.createRange()
          range.selectNodeContents(this.editableEle)
          range.collapse(false)
          sel.removeAllRanges()
          sel.addRange(range)
        } else if (this.fullContent) {
          // 指标对象：超过 100 字时候的中文输入法
          // 原由：尽管不会输出胜利，然而输出过程中字母仍然会浮现在输入框内
          // 弊病：谷歌浏览器输入法的界面偶然会闪现
          event.target.innerText = this.fullContent
          this.CNEnd = true
        }
     }

当获取元素节点的兄弟文本节点 node.nextSibling 时，元素节点必须要有文本内容，否则一堆世界未解之谜。

  clearFontTag () {
    // 当删除时，浏览器主动增加 font 标签加款式
    const fontTag = this.editableEle.querySelector('font')
    if (fontTag) {const newNode = document.createTextNode(fontTag.textContent)
      this.editableEle.replaceChild(newNode, fontTag)
      const {selection} = this.lastSelection
      selection.extend(newNode, 1)
      selection.collapseToEnd()
      this.cacheCursorPos()}
  }

应用 contenteditable="plaintext-only" 创立可编辑区时，在带有款式的标签后回车，换行后仍在标签内
应用 contenteditable="true" 创立可编辑区时，，在带有款式的标签后回车，浏览器主动在新行增加款式标签。

解决方案

  clearNewlineSideEffect () {const { range} = this.lastSelection
    const node = range.startContainer
    const baseNode = isAndroid ? node.parentNode : node
    if (baseNode.nodeType === 1 && baseNode.className === 'tag' && !/^#/.test(baseNode.textContent)) {const frag = document.createDocumentFragment()
      const textNode = document.createTextNode(baseNode.textContent)
      const brNode = document.createElement('br')
      frag.appendChild(textNode)
      frag.appendChild(brNode)
      baseNode.parentNode.replaceChild(frag, baseNode)
    }
  },

`selection`文本抉择

selection也能够实现 range 局部性能的范畴抉择

selection.setBaseAndExtent(anchorNode, anchorOffset, focusNode, focusOffset)等同于对设置range.setStart(anchorNode, anchorOffset)、range.setEnd(focusNode, focusOffset)
通过 selection.collapse(node, offset) 等同于对 同一 node设置range.setStart(node, 0)、range.setEnd(node, offset)
通过 selection.setPosition(node, offset) 等同于对 同一 node设置 同一偏移量 range.setStart(node, offset)、range.setEnd(node, offset) 或range.setStart(node, offset)、range.collapse(true)
通过 selection.deleteFromDocument() 从文档中删除所抉择的内容

selection-range
contenteditable+user-modify
中英文长度限度

正文完

javascript

发表至： javascript

2021-03-22

0

用-Vue-编写抽象组件

采用shell自定义脚本,控制集成部署环境更加方便灵活

关于javascript:lodash的读音lodash为什么叫lodash

关于javascript:Python接入微信公众号Token验证

关于java:爬虫大佬把他总结的正则表达式使用给我了

关于javascript:用户输入-文本插入

键盘输入分类

间接输出

间接输出

辨别中英文输出

`e.keyCode`在中英文下不同的体现

输出的事件监听

自定义编辑器

一般标签可编辑

`contenteditable`标签属性

`user-modify`CSS 属性

两种形式比照

插入内容 && 敞开抉择范畴

基本知识

`Selection`类型

设置光标地位为某元素后

代码示例

长度限度

不了解的问题解决方案

node.nextSibling.nodeType === 3

删除有款式的文本时（常见于插入回车），浏览器会主动生成 <font> 追加款式

在带有款式的标签后回车，下一行浏览器主动带款式

知识点补充

`selection`文本抉择

参考文档

站内搜索

关于javascript:用户输入-文本插入

键盘输入分类

间接输出

间接输出

辨别中英文输出

e.keyCode在中英文下不同的体现

输出的事件监听

自定义编辑器

一般标签可编辑

contenteditable标签属性

user-modifyCSS 属性

两种形式比照

插入内容 && 敞开抉择范畴

基本知识

Selection类型

设置光标地位为某元素后

代码示例

长度限度

不了解的问题解决方案

node.nextSibling.nodeType === 3

删除有款式的文本时（常见于插入回车），浏览器会主动生成 <font> 追加款式

在带有款式的标签后回车，下一行浏览器主动带款式

知识点补充

selection文本抉择

参考文档

站内搜索

`e.keyCode`在中英文下不同的体现

`contenteditable`标签属性

`user-modify`CSS 属性

`Selection`类型

`selection`文本抉择