Question

如何禁用输入键以单击按钮。因此，当按钮处于焦点状态并且按下Enter键时，您将不会单击按钮。

我输入了Aim Trainer的代码，但有一个作弊方法：您可以按Enter键单击，而不必用鼠标（或移动设备上的手指）单击。

您可以在这里看到我的意思https://aimtrainer.netlify.com/clickbased.html

如果您单击输入按钮，则应该什么都不会发生，但是现在您将触发某种点击事件。

我尝试过：但是那行不通

$('html').bind('keypress', function(e){
  if(e.keyCode == 13)
  {
    return false;
  }
});

Answer 1

您尝试过使用e.preventDefault()吗？

$(document).on('keypress',function(e) {
    if(e.which == 13) {
        e.preventDefault()
    }
});

Answer 2

您需要preventDefault（）和模糊

其他好主意：tabindex="-1" type="button"

let score = 0;
const addScore = function(val) {
  score += val;
  $("#score").html('score: ' + score);
}

const newRandomPosition = function() {
  $("#button").css({
    'left': ranNum(90) + 'vw',
    'top': ranNum(90) + 'vh',
    'opacity': 1
  })
}

const ranNum = function(max) {
  return Math.random() * max
}

$(function() {
  $(document).on('keypress', function(e) {
    if (e.target && e.target.id === "button" && e.which == 13) {
      e.preventDefault()
    }
  });

  $("#button")
    .on("click", function(e) {
      e.preventDefault();
      //	openFullscreen()
      $(this).css("opacity", 0)
      addScore(100)
      newRandomPosition()
    })
    .on("focus", function() {
      this.blur()
    })

});

.button {
  position: relative;
  background-color: #FB6107;
  border: none;
  color: white;
  padding: 20px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button tabindex="-1" type="button" id="button" class="button button5"></button>
<h1 id="score" class="scoreText">Score: 0</h1>

Answer 3

使用 tab 键

将tabindex设置为-1以避免聚焦

<button id="button" class="button button5" onclick="hidebtn(this)" tabindex="-1"></button>

使用blur()

手动对焦按钮

function newRandomPostion(){
    $("#button").css({left:ranNum(90)+'vw',top:ranNum(90)+'vh'});
    $("#button").css('opacity', 1);
    $("#button").blur();
}

禁用Enter键以单击按钮

3 个答案: