问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
开发者社区
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

搜狗输入法回车键是可以输入英文的，通过keydown去检测回车键提交，但是有的时候用户只是输出英文字母，但是表单就已经提交了。

头像
明非
    65611014

    RT 如何去解决这个问题。

    javascripthtml
    阅读 8.2k
    5 个回答
    得票最新
    头像
    长颈鹿
      1.1k111
      ✓ 已被采纳

      如果是input的话，文本域另当别论。监听input keydown和keyup事件。keydown记录此时的value，keyup判断当前按下的键是否为回车键，如果是，并且value值没有改变，即提交，否则不提交。

          var input = document.querySelector('input'),
        oldValue = '';

    input.addEventListener('keydown', function(e){
        oldValue = this.value;
    }, false);

    input.addEventListener('keyup', function(e){
        var code = e.keyCode;
        if( code == 13 ){
            if( oldValue === this.value ){
                console.log('submit');
            }
        }

    }, false);

      测试截图
      图片描述

      第一次回车不会打印submit,如果再按下回车就会打印。

      头像
      白一梓
        3.2k137089

        监听表单的onsubmit事件即可，然后把提交按钮的type设置成submit。不需要监听keydown事件。

        头像
        启程
          2.9k2515

          既然你在楼上的回答里评论说有时候可能不是表单，我觉得：
          加入你的提交按钮是个A，可以在keydown的时候判断一个变量，比如 isCanSubmit 。
          在表单change的时候去看一下整个form是否可以提交，可以的话把这个变量赋值为true。

          具体实施可能有点复杂，效率低。

          头像
          堕天使008
            1.6k2212

            为了测试你这问题我还专门下了一个搜狗输入法。。。

            代码如下：

            js:

                $(function() {

//         $(document).keyup(function(event) {
//             if (event.keyCode == 13) {
//                 console.log($('#input').val());
//             }
//         });
        document.onkeydown= function(event) {
            if (event.keyCode == 13) {
                console.log($('#input').val());
            }
        }
    });

            html:

            <body>
<input id="input">
</body>

            结果如下：

            1. 使用原生js和使用jquery出现这个问题的概率基本无差别。

            2. 使用keydown比使用keyup更容易触发此问题。(按下面的分析应该keyup更容易触发啊，不知道是我判断错误，还是我感觉错误)

            3. 和按键的时长有关系，快速的按下松开基本不触发此问题，长按一段时间几乎必定出现触发。

            4. 此问题只在搜狗时频繁出现，win8默认拼音输入法正常使用不会触发此问题，按键时间超长则也会触发此问题。

            结论：

            应该是和输入法缓冲区在输出之后返回焦点的时间不一致，搜狗返回焦点比较快，导致按键时间稍长就会，就会被已获取焦点的html响应。

            解决方案：

            本人技术渣，未想到合适的解决方案

            头像
            Nanedo
              21
              新手上路，请多包涵

              简单点就增加多重事件去重复处理，如

              <input type="text" id="number" style="ime-mode:disabled">
<script>
    var inp = document.getElementById('number');
    inp.onkeyup = inp.onblur = inp.oninput = function(event){
        inp.value = inp.value.replace(/[^0-9\.]/g,'');
    } 
</script>
              撰写回答
              你尚未登录，登录后可以
              • 和开发者交流问题的细节
              • 关注并接收问题和回答的更新提醒
              • 参与内容的编辑和改进，让解决方法与时俱进
              推荐问题