javascript reset時のイベントを取得してメッセージを表示する

2020.10.04
javascript
javascript

javascriptで、onresetを使って、reset時のイベントを取得してメッセージを表示するサンプルコードを記述してます。

1. 環境
2. onreset使い方
3. サンプルコード

環境

OS windows10 pro 64bit
Apache 2.4.43
ブラウザ chrome 84.0.4147.105

windows10にApacheのインストール

onreset使い方

onresetを使うと、reset時のイベントを取得することが可能です。

<form id="frm" onreset="return confirm('リセットします')">

1	<form id="frm" onreset="return confirm('リセットします')">

以下のように記述することも可能です。

/* html部 */
<form id="frm" onreset="return hoge();">
  <div">
    <button type="reset">reset</button>
  </div>
</form>

/* js部 */
function hoge() {
  return confirm('resetしますか');
}

/* html部 */

<div">

<button type="reset">reset</button>

</div>

</form>

/* js部 */

function hoge() {

return confirm('resetしますか');

}

下記でも、同じ動作になります。

/* html部 */
<form id="frm">
  <div">
    <button type="reset">reset</button>
  </div>
</form>

/* js部 */
document.getElementById('frm').onreset = function(){ 
  return confirm('resetしますか');
};

/* html部 */

<div">

<button type="reset">reset</button>

</div>

</form>

/* js部 */

document.getElementById('frm').onreset = function(){

return confirm('resetしますか');

};

また、js部だけをアロー関数とdocument.getElementByIdを省略して、で1行で記述することも可能です。

frm.onreset = () => { confirm('resetしますか')};

1	frm.onreset = () => { confirm('resetしますか')};

アロー関数の使い方

サンプルコード

以下は、
「 reset 」ボタンをクリックするとconfirmを表示する
サンプルコードとなります。

※cssには「bootstrap material」を使用してます。

<!DOCTYPE html>
<html lang="ja">

<head>
  <meta charset="utf-8">
  <title>mebeeサンプル</title>
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Material+Icons">
  <link rel="stylesheet"
    href="https://unpkg.com/bootstrap-material-design@4.1.1/dist/css/bootstrap-material-design.min.css"
    integrity="sha384-wXznGJNEXNG1NFsbm0ugrLFMQPWswR3lds2VeinahP8N0zJw9VWSopbjv2x7WCvX" crossorigin="anonymous">
</head>
<style>
  .main {
    margin: 0 auto;
    margin-top: 200px;
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 25px;
    width: 500px;
  }
</style>


<body>
  <div class="main">

    <form id="frm" onreset="return confirm('リセットします')">
      <div class="form-group">
        <input type="email" class="form-control">
      </div>
      <div class="col-auto my-1">
        <button type="reset" class="btn btn-primary">reset</button>
      </div>
    </form>

  </div>
</body>

</html>

<!DOCTYPE html>

<head>

<title>mebeeサンプル</title>

href="https://unpkg.com/bootstrap-material-design@4.1.1/dist/css/bootstrap-material-design.min.css"

integrity="sha384-wXznGJNEXNG1NFsbm0ugrLFMQPWswR3lds2VeinahP8N0zJw9VWSopbjv2x7WCvX" crossorigin="anonymous">

</head>

<style>

.main {

margin: 0 auto;

margin-top: 200px;

display: flex;

flex-direction: column;

align-items: center;

font-size: 25px;

width: 500px;

}

</style>

<body>

</div>

<button type="reset" class="btn btn-primary">reset</button>

</div>

</form>

</div>

</body>

</html>

confirmが表示されているが確認できます。

javascript reset時のイベントを取得してメッセージを表示する

環境

onreset使い方

サンプルコード

C# if文でエラーメッセージ「到達できないコードが検出されました」の表示を解消 2020.10.04

javascript URLを分割代入と正規表現を使用して分割して取得する 2020.10.04

javascript reset時のイベントを取得してメッセージを表示する

環境

onreset使い方

サンプルコード

C# if文でエラーメッセージ 「到達できないコードが検出されました」の表示を解消 2020.10.04

javascript URLを分割代入と正規表現を使用して分割して取得する 2020.10.04

C# if文でエラーメッセージ「到達できないコードが検出されました」の表示を解消 2020.10.04