在我们的service后台,使用jQuery写了一个微信聊天的网页版,嵌在了我们的后台系统里,如下图所示:
今天临时加了一个这样的优化,在输入框里复制粘贴过一段文字过来之后,运营要直接在输入框里排版,既可以使用Alt+Enter实现回车,又可以在中间插入表情。然后我发现了selectionStart和selectionEnd这两个方法自己先写了一个小demo来实现
获取光标的下标,
滑动的时候获取开始结束的位置及选中内容等等,
当然还有强制让光标显示在某个下标位置使用obj.selectionStart= obj.selectionEnd =5;等等,发现了一些有意思的功能。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
#dope{
width: 200px;
height: 400px;
}
</style>
</head>
<body>
<textarea id="dope">
</textarea>
<div id="getSelectedText">hahahhahahah</div>
</body>
</html>
<script>
window.onload = function() {
var textarea = document.getElementById('dope');
var getPosi = document.getElementById('getSelectedText');
getPosi.onclick = function () {
console.log(getSelectedText(textarea))
}
function getSelectedText(obj) {
var userSelection;
if (typeof obj.selectionStart === 'number' && typeof obj.selectionEnd === 'number') {
// 非IE浏览器
var startPos = obj.selectionStart,// 获取选区的开始位置
endPos = obj.selectionEnd;// 获取选区的结束位置
console.log("非IE:")
console.log("选区开始点:" + startPos + ',选区结束点:' + endPos)
userSelection = obj.value.substring(startPos, endPos)
} else if (document.selection) {
// IE浏览器
console.log("IE:")
userSelection = document.selection.createRange().text
}
return userSelection
}
}
</script>