android editable 光标,contenteditable 仿造input 光标定位

背景：在初次使用contenteditable写可输入的div模块，当需求要求输入限制字数，还要光标正常的情况来模拟input

直接上demo，用vue写的(框架不重要)，demo中用了vant的toast,css注意下是sass

如果你了解vue,可以直接搭建一个demo项目，然后复制下下面的代码运行起来就能看到效果

搭建demo可以参考我之前的文章https://segmentfault.com/a/11...

class="edit-content thin-scroll"

contenteditable="true"

ref="edit-content"

placeholder="Ctrl+V 可粘贴文字"

@keydown="inputChecked"

@keyup="inputLength"

>{{ comm_info }}

{{ currentLength }}

/

10

import Vue from 'vue';

import { Toast } from 'vant';

Vue.use(Toast);

export default {

name: 'Input',

components: {},

data() {

return {

comm_info: '',

currentLength: 0

};

},

mounted() {

},

methods: {

inputChecked(e) {

//Backspace键8 F5键116 37~40方向箭头 Del键46

if (

e.target.innerText.length >= 10 &&

e.keyCode !== 8 &&

e.keyCode !== 116 &&

e.keyCode !== 37 &&

e.keyCode !== 38 &&

e.keyCode !== 39 &&

e.keyCode !== 40 &&

e.keyCode !== 46

) {

e.preventDefault();

}

},

inputLength(e) {

if (e.target.innerText.length > 10) {

Toast.fail('最多可输入10字');

e.target.innerText = e.target.innerText.substring(0, 10);

this.getInputSelection(e.target);

}

this.currentLength = e.target.innerText.length;

},

/**

* 获取输入的光标到字符串最后一位

* @param {obj} obj

*/

getInputSelection(obj) {

//处理光标问题

if (window.getSelection) { //ie11 10 9 ff safari

// obj.focus(); //解决ff不获取焦点无法定位问题

let range = window.getSelection(); //创建range

range.selectAllChildren(obj); //range 选择obj下所有子内容

range.collapseToEnd(); //光标移至最后

} else if (document.selection) { //ie10 9 8 7 6 5

let range = document.selection.createRange(); //创建选择对象

//var range = document.body.createTextRange();

range.moveToElementText(obj); //range定位到obj

range.collapse(false); //光标移至最后

range.select();

}

}

}

};

.edit-content-wrap {

width: 100%;

border: 1px solid #dddddd;

.edit-content {

outline: none;

min-height: 124px;

width: 100%;

text-align: justify;

padding: 7px 10px;

word-wrap: break-word;

word-break: break-all;

overflow-y: auto;

&:empty::before {

content: attr(placeholder);

color: gray;

}

}

.edit-footer {

height: 36px;

background: #f7f9fa;

border-top: 1px solid #dddddd;

display: flex;

justify-content: space-between;

align-items: center;

padding: 0 20px;

.edit-footer-part-3 {

.follow-small-height {

width: 120px;

}

}

}

}