inputの入力時に、バイト数で入力を制限する方法についてみていきます。
またまたコード自体は短いです。また、覚えることも少ないので簡単に実装できると思います。
１．escape()
escapeは、文字を16進数のエスケープシーケンスで置き換えた文字列にします。
エスケープシーケンスとは、Wikiより抜粋した内容となりますが、
コンピュータシステムにおいて、通常の文字列では表せない特殊な文字や機能を、規定された特別な文字の並びに
より表したもの
となります。正直な話ですが、これだけでは何を言っているのか分かりません。
ですので具体的にみてみると、次のようなものがあります。
\n 改行
\’ シングルクォテーション
\” ダブルクォテーション
\0 NULL文字
あまり詳しくない人でも、「\n」の改行くらいは見たことがあると思います。
エスケープシーケンスというような表現を使うと「？？？」となるかもしれませんが、
「\n」が改行を意味するような、特殊な文字の書き方というようにイメージすればよいと思います。
しかし、なぜこれがバイト数で文字入力を制限するのに使用できるのか？と
思われるかもしれませんが、こちらの特徴としては、１バイトの文字の場合には、
必ず３文字以内の文字列が返ってきます。
つまり、入力した文字列を１文字ずつに分解して、それぞれの文字が何バイトか判定していき、
指定されたバイト数を超える場合は、リターンするような処理にすればいいだけです。
２．完成形
まずは指定した文字列を、指定のバイト数以下で返す関数を作成します。
function lenByte(str, len) {
let arr = str.split(”);
let cnt = 0;
let ret = ”;
for (let i = 0; i < arr.length; i++) {
let enc = escape(arr[i]);
if (enc.length <= 3) {
cnt += 1;
}
else {
cnt += 2;
}
if (cnt > len) { return ret; }
ret += arr[i];
}
return ret;
}
内容を見ていくと、
let arr = str.split(”);
の部分で、指定した文字列「str」を１文字ずつ区切っています。
区切った文字列をループでみていくのが、
for (let i = 0; i < arr.length; i++) {
の部分で、
let enc = escape(arr[i]);
が、１に記載したescapeになります。
１バイト文字なら３文字以下、２バイト文字なら４文字以上の文字列を返すので、
if (enc.length <= 3) {
cnt += 1;
}
３文字以下なら、cnt（バイト数のカウントをする）を１増やします。
else {
cnt += 2;
}
それ以外（４文字以上）なら、cntを２増やします。
cntが指定されたバイト数「len」を超えないなら、返し用の文字列「ret」に加えていきます。
cntがlenを超えた場合は、その文字を加えずに「ret」を返します。
if (cnt > len) { return ret; }
ret += arr[i];
最後にFor文を抜けた場合もretを返します。
return ret;
という感じになります。
新しくJavaScriptファイルを作成して組み込んでしまってもよいかと思います。
組み込んだ時のソース全体は、
class inputText {
constructor(input) {
input.oninput = function () {
if (input.getAttribute(‘lenB’) != null && isNaN(input.getAttribute(‘lenB’)) == false) {
let ln = input.getAttribute(‘lenB’);
input.value = lenByte(input.value, ln);
}
}
}
}
function lenByte(str, len) {
この関数は上記のものと同じなので割愛
}
呼び出し元のHTML側では、
<input id=”inp01″ lenB=”8″/>
のようにinputを配置し、
window.onload = function () {
new inputText(document.getElementById(‘inp01’));
}
のような感じでonloadイベントで呼び出せば大丈夫かと思います。
システム開発のためのJavaScriptプログラミングに戻る
