输入框插进去脸色的完成

在平常的 textarea 中,只能显现平常的文本。假如简朴的输入文本,textarea 便足以胜任。然则实际状况每每要庞杂很多。

简朴版本的插进去脸色

罕见的版本平常都是运用 textarea,然后脸色运用某种商定的文本格式替代,比方“你好啊[笑容]”。在显现的时刻,经由过程牢固的文本剖析要领将内容中的脸色文本替换成图片。新浪微博中发微博的输入框就是云云。然则,在这有一点须要注重,假如只是简朴的在文本的末了插进去脸色之类的预定好的文本格式,只需猎取到到 textarea 的 value 然后做加法即可。

let editor = document.querySelect('#editor');
editor.value += '[笑容]';

没你想的这么简朴

但实际状况却没有这么简朴,由于用户能够本身挑选光标的位置。当用户在某一段文本中心插进去光标以后,可不是简朴的加法了。在这类状况下,须要猎取到光标地点位置,在这个位置上插进去用来替代脸色的文本,然后将光标设置到脸色文本的背面。在这须要两个分外的要领:getCaretPositionsetCaretPosition

getCaretPosition/setCaretPosition

浏览器并没有供应直接猎取光标位置的要领,须要我们变通的处置惩罚。浏览器基础上都支撑文本框的select()要领,这个要领用于选中文本框中一切的文本,然则只能乖乖的拿到返回的一切文本。HTML5 添加了两个属性:selectionStart 和 selectionEnd 协助我们越发顺遂地猎取挑选的文本。这两个属性中保留的是基于0的数值,示意所挑选的文本的局限,离别示意文本选区(选中的文本)开首和末端相对全部文本内容的偏移量(在全部文本内容中的位置)。比方:

let editor = document.querySelector('#editor');
// 从第一个字符最先,选中三个字符
editor.selectionStart = 0;
editor.selectionEnd = 1;

// 从第三个字符最先选中三个字符
editor.selectionStart = 2;
editor.selectionEnd = 5;

说到这你可能要问了,这个光标有啥关联啊?别急,听我慢漫说。既然上述两个设置差别数字能够挑选文本,那假如两个值设置成雷同的数字,会怎样呢?

// 从第三个字符最先选中零个字符
editor.selectionStart = 2;
editor.selectionEnd = 2;

出发点和尽头重合了!那末换个角度来形貌就是:当我们在猎取光标位置的时刻,实在就是选中的文本局限出发点和重点重合,相当于文本局限的出发点偏移量实在就是光标地点的位置偏移量,所以此时selectionStart的返回值就是我们须要的效果。

更症结的是,当 End 和 Start 设置成雷同值时,选区也是空的,出发点和重点充电,就好像是设置了光标的位置。实在有一个轻便的要领 setSelectionRange(start, end),道理雷同。

当然有兴致你也能够尝尝 End小于 Start的状况。上述这些在当代浏览器和 IE9+ 上都支撑。

前端一直贫苦的照样浏览器的兼容问题。在低版本的 IE 中只能运用 document.selection 对象来模仿光标定位了。document.selection 只存在于 IE8 及更早的版本(能够运用 window.getSelection 替代),保留着用户在全部文档局限内挑选的文本信息,然则没法肯定用户挑选的是页面中哪一个部位的文本。要想获得挑选的文本,起首须要建立一个局限(Range,IE9+ 支撑 DOM Range API,然则 IE8及之前的版本不支撑,然则有相似的观点,text range。这是 IE 专有的特征)。可运用 document.selection.createTextRange 来建立我们所须要的 text range。然后应用moveStart().aspx)将文本的局限的出发点从当前位置(当前位置出发点和重点是重合的)移动到文本的开首,然后盘算选中文本的长度,这个长度值能够用来替代当前光标的位置。

let range = document.selection.createRange();
range.moveStart("character", editor.value.length);
cursurPosition = range.text.length;

设置光标位置思绪相似,然则代码稍有差别:

let range = editor.createTextRange();
range.collapse(true);
range.moveEnd('character', pos);
range.moveStart('character', pos);
range.select();

总的来讲,在 textarea 中猎取和设置光标位置照样蛮简朴的。讲到这里了,我想插进去脸色应该是很轻松的一件事变了

猎取光标位置(文本局限前后堆叠) -> 修正文本局限(或许手动拼接) -> 从新设置光标位置 

至此,脸色插进去功用的基础完成。

还没完毕

上述例子中,在输入框中脸色只能以文本的情势显现。假如想在输入框中显现输入的脸色,该怎么办呢?运用 contenteditable 属性为 true 的容器替代 textarea 是必需的,由于 textarea 中只能显现文本。然则这就充足了吗?不,明显不够。没有了 textarea 则认为这没有了 setSelectionRange, selectionStart 和 selectionEnd。然则幸亏道理也是相似,照旧运用 Range API 或许 Text Range(IE8及其更低版本)。详细的能够参考这篇:html元素contenteditable属性怎样定位光标和设置光标和这篇在可编辑的div中插进去图片。 详细实当代码我就不贴了,人人能够本身思索捋一捋。闻一知十,假如你真真正正地晓得怎样准确插进去图片,那末插进去庞杂的 DOM 构造对你来讲也是易如反掌。

    原文作者:张伦
    原文地址: https://segmentfault.com/a/1190000006258345
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞

发表评论

电子邮件地址不会被公开。 必填项已用*标注