对于移动端经常遇到输入键盘的回车是发送、搜索、下一项等样式
enterkeyhint属性可以修改输入键盘的回车键的表现形式
<input enterkeyhint="enter" placeholder="换行">
<input enterkeyhint="done" placeholder="完成">
<input enterkeyhint="go" placeholder="前往">
<input enterkeyhint="next" placeholder="下一项">
<input enterkeyhint="previous" placeholder="上一项">
<input enterkeyhint="search" placeholder="搜索">
<input enterkeyhint="send" placeholder="发送">
需要配合事件触发不同的行为(以发送为例)
在vue中采用以下方法监听事件
el-input标签用 @keyup.enter.native
<el-input v-model="question" @keydown.enter.native="keyDown">
input用 @keydown.enter
<input enterkeyhint="send" placeholder="发送" onkeydown="Keydown()">
<script>
function Keydown(e) {
e = e || window.event
if (!e.shiftKey && e.keyCode == 13) {
e.cancelBubble = true; //ie阻止冒泡行为
e.stopPropagation(); //Firefox阻止冒泡行为
e.preventDefault(); //取消事件的默认动作*换行
//以下处理发送消息代码
//....
}
}
</script>
在输入时希望光标到最后的位置(通过选择内容修改的光标)根据需要放置
<input enterkeyhint="send" onkeydown="Keydown()" value="示例内容" id="sendInput" autofocus="true">
<script>
window.onload = function () {
var DomElement = document.getElementById('sendInput')
DomElement.setSelectionRange(DomElement.value.length, DomElement.value.length)
}
</script>