javascript_javascript 기술을 사용하여 버튼에 대한 캐리지 리턴 이벤트를 등록하는 방법(기본 버튼 설정)-JS 튜토리얼-php.cn

javascript_javascript 기술을 사용하여 버튼에 대한 캐리지 리턴 이벤트를 등록하는 방법(기본 버튼 설정)

WBOY

풀어 주다： 2016-05-16 16:00:01

원래의

1314명이 탐색했습니다.

이 글의 예시에서는 버튼에 대한 캐리지 리턴 이벤트를 자바스크립트로 등록하는 방법(기본 버튼 설정)을 설명합니다. 참고할 수 있도록 모든 사람과 공유하세요. 세부 내용은 다음과 같습니다.

우선 JS에 있어서는 정말 초보라는 점을 말씀드리고 싶습니다. JS와 JQuery와 같은 일부 JS 프레임워크에 대해서는 아직 간단한 적용 단계에 불과합니다. 물론 앞으로도 JS에 대한 더 많은 경험을 공유하고 싶습니다. 오늘은 재미있는 것부터 시작해보겠습니다. 기본 버튼을 설정하는 방법에 대해 이야기해 보겠습니다. 즉, 포커스가 버튼에 있는지 여부에 관계없이 Enter 키를 누르기만 하면 버튼의 클릭 이벤트가 발생합니다.

코드는 매우 간단합니다. 이 기능을 완료하려면 몇 줄의 코드만 필요합니다.

//为keyListener方法注册按键事件
document.onkeydown=keyListener;
function keyListener(e){
 // 当按下回车键，执行我们的代码
 if(e.keyCode == 13){
 //我们要做的事情
 }
}

로그인 후 복사

글쎄, 블로그를 이렇게 마무리하는 건 좀 쑥스러운 것 같아요. 마지막으로 여러분을 위한 작은 프로그램의 예를 첨부하겠습니다.

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <title>计算器</title>
  <script type="text/javascript" >
   function calculate() {
    var a = document.getElementById("pre-tax").value;
    if (parseInt(a)>8000) {
     document.getElementById("interest").value =800+ (a - 8000)*15/100;
    } else {
     document.getElementById("interest").value =a/10;
    }
   }
   //为keyListener方法注册按键事件
   document.onkeydown=keyListener;
   function keyListener(e){
    // 当按下回车键，执行我们的代码
    if(e.keyCode == 13){
     calculate();
    }
   }
  </script>
 </head>
 <body >
  税前薪资：<input type="text" id="pre-tax"/> 
  <input type="button" id="calculate" value="计算" onclick="calculate()"/>
  利息：<input type="text" id="interest" readonly="readonly"/>
 </body> 
</html>

로그인 후 복사

이 작은 예는 매우 간단하고 코드도 이해하기 쉽지만 코드 뒤에 숨겨진 내용은 일반 사람들이 이해할 수 없습니다. 이해하셨다면 손을 들어주세요....

이 기사가 모든 사람의 JavaScript 프로그래밍 설계에 도움이 되기를 바랍니다.