input输入框回车发送，移动端回车按钮的样式

对于移动端经常遇到输入键盘的回车是发送、搜索、下一项等样式

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>