【Monaca】Onsen UI 自作のテンキーボードを制御する

前回紹介した【Monaca】Onsen UI 自作のテンキーボードを表示するの続き、制御の処理を追加したいと思います。
※2020/05/04 コードの一部を修正。

2020.04.03

今回は、Onsen UIに自作のテンキーボードを表示する方法を紹介します。FX収支管理の入力画面と同じ方法です。Monacaデバッガーの結果です。iOS版Android版次回は、各キーの制御について紹介する予定です。HTML<div class="div-tenkey"> <div class="div-tenkey_board"> <ons-row vertical-align="center"> <ons-col width="3%"></ons-col> <ons-col width="22%"> <ons-button modifier="large" class=&quot...

Monacaデバッガーの結果です。
iOS版

Android版

数字およびピリオドを含め、8桁まで入力できるように処理しています。
＋および－はカウントしません。
数値入力のほかパスコード入力などにも応用できると思います。

HTML

<ons-page>
  <div class="div-panel">
    <div class="div-value"></div>
  </div>
  <div class="div-tenkey">
    <div class="div-tenkey_board">
      <ons-row vertical-align="center">
        <ons-col width="3%"></ons-col>
        <ons-col width="22%">
          <ons-button modifier="large" class="button-tenkey_number" onclick="tapButton('1')">1</ons-button>
        </ons-col>
        <ons-col width="2%"></ons-col>
        <ons-col width="22%">
          <ons-button modifier="large" class="button-tenkey_number" onclick="tapButton('2')">2</ons-button>
        </ons-col>
        <ons-col width="2%"></ons-col>
        <ons-col width="22%">
          <ons-button modifier="large" class="button-tenkey_number" onclick="tapButton('3')">3</ons-button>
        </ons-col>
        <ons-col width="2%"></ons-col>
        <ons-col width="22%">
          <ons-button modifier="large" class="button-tenkey_number" onclick="tapButton('B')">BS</ons-button>
        </ons-col>
        <ons-col width="3%"></ons-col>
      </ons-row>
      <ons-row vertical-align="center">
        <ons-col width="3%"></ons-col>
        <ons-col width="22%">
          <ons-button modifier="large" class="button-tenkey_number" onclick="tapButton('4')">4</ons-button>
        </ons-col>
        <ons-col width="2%"></ons-col>
        <ons-col width="22%">
          <ons-button modifier="large" class="button-tenkey_number" onclick="tapButton('5')">5</ons-button>
        </ons-col>
        <ons-col width="2%"></ons-col>
        <ons-col width="22%">
          <ons-button modifier="large" class="button-tenkey_number" onclick="tapButton('6')">6</ons-button>
        </ons-col>
        <ons-col width="2%"></ons-col>
        <ons-col width="22%">
          <ons-button modifier="large" class="button-tenkey_number" onclick="tapButton('C')">CL</ons-button>
        </ons-col>
        <ons-col width="3%"></ons-col>
      </ons-row>
      <ons-row vertical-align="center">
        <ons-col width="3%"></ons-col>
        <ons-col width="22%">
          <ons-button modifier="large" class="button-tenkey_number" onclick="tapButton('7')">7</ons-button>
        </ons-col>
        <ons-col width="2%"></ons-col>
        <ons-col width="22%">
          <ons-button modifier="large" class="button-tenkey_number" onclick="tapButton('8')">8</ons-button>
        </ons-col>
        <ons-col width="2%"></ons-col>
        <ons-col width="22%">
          <ons-button modifier="large" class="button-tenkey_number" onclick="tapButton('9')">9</ons-button>
        </ons-col>
        <ons-col width="2%"></ons-col>
        <ons-col width="22%">
          <ons-button modifier="large" class="button-tenkey_number" onclick="tapButton('S')">+/-</ons-button>
        </ons-col>
        <ons-col width="3%"></ons-col>
      </ons-row>
      <ons-row vertical-align="center">
        <ons-col width="3%"></ons-col>
        <ons-col width="46%">
          <ons-button modifier="large" class="button-tenkey_number" onclick="tapButton('0')">0</ons-button>
        </ons-col>
        <ons-col width="2%"></ons-col>
        <ons-col width="22%">
          <ons-button modifier="large" class="button-tenkey_number" onclick="tapButton('P')">.</ons-button>
        </ons-col>
        <ons-col width="2%"></ons-col>
        <ons-col width="22%">
          <ons-button modifier="large" class="button-tenkey_number" onclick="tapButton('E')"><i class="ion-ios-return-left"></i></ons-button>
        </ons-col>
        <ons-col width="3%"></ons-col>
      </ons-row>
    </div>
  </div>
</ons-page>

<ons-page>

</div>

<ons-row vertical-align="center">

<ons-col width="3%"></ons-col>

<ons-col width="22%">

<ons-button modifier="large" class="button-tenkey_number" onclick="tapButton('1')">1</ons-button>

</ons-col>

<ons-col width="2%"></ons-col>

<ons-col width="22%">

<ons-button modifier="large" class="button-tenkey_number" onclick="tapButton('2')">2</ons-button>

</ons-col>

<ons-col width="2%"></ons-col>

<ons-col width="22%">

<ons-button modifier="large" class="button-tenkey_number" onclick="tapButton('3')">3</ons-button>

</ons-col>

<ons-col width="2%"></ons-col>

<ons-col width="22%">

<ons-button modifier="large" class="button-tenkey_number" onclick="tapButton('B')">BS</ons-button>

</ons-col>

<ons-col width="3%"></ons-col>

</ons-row>

<ons-row vertical-align="center">

<ons-col width="3%"></ons-col>

<ons-col width="22%">

<ons-button modifier="large" class="button-tenkey_number" onclick="tapButton('4')">4</ons-button>

</ons-col>

<ons-col width="2%"></ons-col>

<ons-col width="22%">

<ons-button modifier="large" class="button-tenkey_number" onclick="tapButton('5')">5</ons-button>

</ons-col>

<ons-col width="2%"></ons-col>

<ons-col width="22%">

<ons-button modifier="large" class="button-tenkey_number" onclick="tapButton('6')">6</ons-button>

</ons-col>

<ons-col width="2%"></ons-col>

<ons-col width="22%">

<ons-button modifier="large" class="button-tenkey_number" onclick="tapButton('C')">CL</ons-button>

</ons-col>

<ons-col width="3%"></ons-col>

</ons-row>

<ons-row vertical-align="center">

<ons-col width="3%"></ons-col>

<ons-col width="22%">

<ons-button modifier="large" class="button-tenkey_number" onclick="tapButton('7')">7</ons-button>

</ons-col>

<ons-col width="2%"></ons-col>

<ons-col width="22%">

<ons-button modifier="large" class="button-tenkey_number" onclick="tapButton('8')">8</ons-button>

</ons-col>

<ons-col width="2%"></ons-col>

<ons-col width="22%">

<ons-button modifier="large" class="button-tenkey_number" onclick="tapButton('9')">9</ons-button>

</ons-col>

<ons-col width="2%"></ons-col>

<ons-col width="22%">

<ons-button modifier="large" class="button-tenkey_number" onclick="tapButton('S')">+/-</ons-button>

</ons-col>

<ons-col width="3%"></ons-col>

</ons-row>

<ons-row vertical-align="center">

<ons-col width="3%"></ons-col>

<ons-col width="46%">

<ons-button modifier="large" class="button-tenkey_number" onclick="tapButton('0')">0</ons-button>

</ons-col>

<ons-col width="2%"></ons-col>

<ons-col width="22%">

<ons-button modifier="large" class="button-tenkey_number" onclick="tapButton('P')">.</ons-button>

</ons-col>

<ons-col width="2%"></ons-col>

<ons-col width="22%">

<ons-button modifier="large" class="button-tenkey_number" onclick="tapButton('E')"><i class="ion-ios-return-left"></i></ons-button>

</ons-col>

<ons-col width="3%"></ons-col>

</ons-row>

</div>

</ons-page>

CSS

.div-panel  {
  position: absolute;
  top: 20%;
  width: 100%;
}
.div-value {
  box-sizing: border-box;
  margin: 0 auto;
  padding: 0 20px;
  width: 80%;
  height: 60px;
  border: 1px solid #000;
  background-color: #fff;
  font-size: 48px;
  text-align: right;
  line-height: 60px;
}
.div-tenkey {
  position: absolute;
  bottom: 0;
  width: 100%;
  background-color: #ccc;
}
.div-tenkey_board {
  margin: 8px auto;
  width: 90%;
}
.div-tenkey_board ons-row {
  margin: 6px 0;
}
.button-tenkey_number {
  height: 56px;
  font-size: 28px;
  line-height: 48px;
}
.button-tenkey_number.button--material {
  line-height: 56px;  
}

.div-panel {

position: absolute;

top: 20%;

width: 100%;

}

.div-value {

box-sizing: border-box;

margin: 0 auto;

padding: 0 20px;

width: 80%;

height: 60px;

border: 1px solid #000;

background-color: #fff;

font-size: 48px;

text-align: right;

line-height: 60px;

}

.div-tenkey {

position: absolute;

bottom: 0;

width: 100%;

background-color: #ccc;

}

.div-tenkey_board {

margin: 8px auto;

width: 90%;

}

.div-tenkey_board ons-row {

margin: 6px 0;

}

.button-tenkey_number {

height: 56px;

font-size: 28px;

line-height: 48px;

}

.button-tenkey_number.button--material {

line-height: 56px;

}

JavaScript

"use strict";
var maxLength = 8;
var len = 0;
var data = "0";

ons.ready(function() {
  showData(data);
});
if (ons.platform.isIPhoneX()) {
  document.documentElement.setAttribute('onsflag-iphonex-portrait', '');
  document.documentElement.setAttribute('onsflag-iphonex-landscape', '');
}

function showData(value) {
  document.querySelector(".div-value").innerText = value;
};
function tapButton(key) {
  var len = data.length;
  switch (key) {
    case "E":
      // エンター
      ons.notification.alert({
        messageHTML: "入力した値は、" + document.querySelector(".div-value").innerText + " です。",
        title: "結果",
        buttonLabel: "OK",
        animation: "default",
        callback: function () {}
      });
      break;
    case "B":
      // バックスペース
      if (len > 0) {
        // -に1桁の場合、2つ削除する
        if ((len == 2) && (data.substr(0, 1) == "-")) {
          data = data.substr(0, len - 2);
        } else {
          data = data.substr(0, len - 1);
        }
        if (data == "") data = "0";
      }
      break;
    case "C":
      // クリア
      data = "0";
      break;
    case "P":
      // ピリオド
      if (len == 0) {
        data = "0.";
      } else {
          if (data.substr(0, 1) == "-") len--;
          if ((len < (maxLength - 1)) && (data.search(/\./) == -1)) data += ".";
      }
      break;
    case "S":
      // + or -
      if (len > 0) {
        if (data != "0") {
          if (data.substr(0, 1) == "-") {
            data = data.substr(1, len - 1);
          } else {
            data = "-" + data;
          }
        }
      }
      break;
    default:
      // 数字
      if (data.substr(0, 1) == "-") len--;
      if (len < maxLength) {
        if (data != "0") {
          data += key;
        } else {
          data = key;
        }
      }
  }
  showData(data);
}

"use strict";

var maxLength = 8;

var len = 0;

var data = "0";

ons.ready(function() {

showData(data);

});

if (ons.platform.isIPhoneX()) {

document.documentElement.setAttribute('onsflag-iphonex-portrait', '');

document.documentElement.setAttribute('onsflag-iphonex-landscape', '');

}

function showData(value) {

document.querySelector(".div-value").innerText = value;

};

function tapButton(key) {

var len = data.length;

switch (key) {

case "E":

// エンター

ons.notification.alert({

messageHTML: "入力した値は、" + document.querySelector(".div-value").innerText + " です。",

title: "結果",

buttonLabel: "OK",

animation: "default",

callback: function () {}

});

break;

case "B":

// バックスペース

if (len > 0) {

// -に1桁の場合、2つ削除する

if ((len == 2) && (data.substr(0, 1) == "-")) {

data = data.substr(0, len - 2);

} else {

data = data.substr(0, len - 1);

}

if (data == "") data = "0";

}

break;

case "C":

// クリア

data = "0";

break;

case "P":

// ピリオド

if (len == 0) {

data = "0.";

} else {

if (data.substr(0, 1) == "-") len--;

if ((len < (maxLength - 1)) && (data.search(/\./) == -1)) data += ".";

}

break;

case "S":

// + or -

if (len > 0) {

if (data != "0") {

if (data.substr(0, 1) == "-") {

data = data.substr(1, len - 1);

} else {

data = "-" + data;

}

break;

default:

// 数字

if (data.substr(0, 1) == "-") len--;

if (len < maxLength) {

if (data != "0") {

data += key;

} else {

data = key;

}

showData(data);

}

JavaScript Primer 迷わないための入門書

新品価格
￥4,180から
(2020/5/4 16:00時点)

月	火	水	木	金	土	日
1	2	3	4	5	6	7
8	9	10	11	12	13	14
15	16	17	18	19	20	21
22	23	24	25	26	27	28
29	30

【Monaca】Onsen UI 自作のテンキーボードを制御する

シンプル体重管理簡單體重管理简单体重管理 Ver.1.14.0をリリースしました！

【Cordova】cordova-plugin-local-notificationプラグインの問題点を解決する

【Monaca】Onsen UI 自作のテンキーボードを制御する

Recommended Posts

【Cordova】cordova-plugin-local-notificationプラグインの通知clickイベントが発火しない場合の対処方法

【Cordova】ビルド時にgradleの「journal-1.lock」ファイルロックが発生した場合の対処方法

【Cordova】Onsen UIのons-tabを中央に寄せる方法 その２

【Cordova】Onsen UIのons-tabを中央に寄せる方法その２