javascript_javascript スキルを使用してボタンのキャリッジリターンイベントを登録する方法 (デフォルトボタンの設定)-jsチュートリアル-php.cn

javascript_javascript スキルを使用してボタンのキャリッジリターンイベントを登録する方法 (デフォルトボタンの設定)

WBOY

リリース： 2016-05-16 16:00:01

オリジナル

1377 人が閲覧しました

この記事の例では、JavaScript でボタンの改行イベントを登録する (デフォルトのボタンを設定する) 方法を説明します。皆さんの参考に共有してください。詳細は以下の通りです。

まず第一に、私は 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 プログラミング設計に役立つことを願っています。