美文网首页
JavaScript、jQuery、Vue给input绑定Ent

JavaScript、jQuery、Vue给input绑定Ent

作者: dingFY | 来源:发表于2020-06-18 12:23 被阅读0次

    前端工程师在开发时,经常会遇到这样的需求,产品要求用户在input框输入完内容后按enter键自动提交表单到后台,不需要单击“保存”按钮再提交,以提高用户体验,接来下会分别介绍在JS、JQ、Vue中如何给input绑定Enter回车事件

    键盘事件

    键盘事件触发次序:①onkeydow ②onkeypress ③onkeyup

    | 属性 | 描述 |
    | onkeydown | 某个键盘按键被按下 |
    | onkeypress | 某个键盘按键被按下并松开 |
    | onkeyup | 某个键盘按键被松开 |

    keyCode对照表

    按键keyCode对照表

    JS给input绑定Enter回车事件

    <body>
      <form action="#" onsubmit="return false">
        <input placeholder="请输入用户名" type="text" onkeydown="myFunction()">
      </form>
      <script type="text/javascript">
        // 按下enter键,发送请求,回车键的键值为13
        function myFunction() {
          if(event.keyCode==13) {
            alert('发送成功!');
          }
        }
      </script>
    </body>
    

    JQ给input绑定Enter回车事件

    <body>
      <form action="">
        <input type="text" class="inputValue">
      </form>
    
      <script>
        $('.inputValue').bind('keypress', function (event) {
          if (event.keyCode == "13") {
            alert('你输入的内容为:' + $('.inputValue').val());
          }
        })
      </script>
    </body>
    

    Vue(结合Element UI框架)给input绑定Enter回车事件

    <template>
        <el-form :model="roomForm" @submit.native.prevent>
            <el-form-item class="templateName">
                <el-input @keyup.native.enter="handleDialogSelectRoom" v-model="roomForm.templateName" placeholder="请输入功能室名称"></el-input>
            </el-form-item>
        </el-form>
    </template>
    
    <script>
    export default {
      data() {
        return {
          roomForm: {
            templateName: ''
          }
        }
      },
      methods: {
        handleDialogSelectRoom() {
          console.log(this.roomForm.templateName)
        }
      }
    }
    </script>
    

    文章每周持续更新,可以微信搜索「 前端大集锦 」第一时间阅读,回复【视频】【书籍】领取200G视频资料和30本PDF书籍资料

    相关文章

      网友评论

          本文标题:JavaScript、jQuery、Vue给input绑定Ent

          本文链接:https://www.haomeiwen.com/subject/fopynhtx.html