对于移动端经常遇到输入键盘的回车是发送、搜索、下一项等样式
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中采用以下方法监听事件
input用 @keydown.enter
el-input标签用 @keyup.enter.native
<input enterkeyhint="send" placeholder="发送" onkeydown="Keydown()"><script>function Keydown(e) {e = e || window.eventif (!e.shiftKey && e.keyCode == 13) {e.cancelBubble = true; //ie阻止冒泡行为e.stopPropagation(); //Firefox阻止冒泡行为e.preventDefault(); //取消事件的默认动作*换行//以下处理发送消息代码//....}}</script>
在输入时希望光标到最后的位置(通过选择内容修改的光标)根据需要放置
<input enterkeyhint="send" placeholder="发送" 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>
