入力ボックスの中で入力中にエンターで確定する
記事の作成日 ： 2020/03/30
入力したのはいいんだけど、わざわざボタンを押さないといけないなんて、めんどくさい！。
という発想で生まれたサンプル。
主に一言のチャット向き。
全く関係のない話
Jquery かぁ。自分はネイティブで生きていく主義なんだけどなぁ。
便利そうだなぁ。でも、やっぱりネイティブが一番なんだよなー。
（一応、念のためにこのサイトはJquery が入っていたりするけどね( ´∀｀ )）
サンプル
エンターを押すと出力されるよ。
仕組み
入力されている文字の最後が、エンターという言う名の改行という文字が入力されたときに、確定の処理を行うようにしています。
プログラマーの人は大体ご存じなはずです！。改行の文字コードは 10 なのです！
文字コードチェッカ～
必要なもの
- 入力されている文字を取得する知識
- 入力されるごとに関数を実行させる知識 ( addEventListener )
- もしも文(IF文)を使えるだけのかすかな記憶
これだけあれば実装できる！。
解説
先にコード。
HTML
<textarea id="itext"></textarea>
Javascript
// 省略しておくと、あとで楽になる。
var itxt = document.getElementById("itext");
// 入力フィールドに更新があったときに関数を実行する部分。
itxt.addEventListener("input", inputed );
// addEventListener で呼び出される関数。
function inputed() {
var nowinput = itxt.value; // 省略でラクする。
// 入力されている文字の最後の文字コードを取得
var lastinputUnicode = nowinput.charCodeAt(nowinput.length - 1);
// 確定のための処理。
if (lastinputUnicode == 10 && nowinput.length > 1) {
console.log( nowinput.slice(0, nowinput.length - 1) );
itxt.value = "";
} else if (nowinput.charCodeAt(0) == 10) {
itxt.value = "";
}
}
確定のための処理 部分
if (lastinputUnicode == 10 && nowinput.length > 1) {
最後の文字が改行である時 と 入力されている文字数が１文字以上の時。
nowinput.slice(0, nowinput.length - 1)
改行を含まないようにするためのスライス。最後の一文字は改行なので、改行を含めない出力をする。
else if (nowinput.charCodeAt(0) == 10) {
入力された１文字目が
改行だったら、入力フィールド内の文字を全て消す。
これがないと改行をそのまま入力できてしまうよ。
まとめ
エンター１回で内容が送信されるチャットは使いたくない。
なぜなら変換を確定させる時にエンターキーを押すからである。
多くエンターキーを押してしまえば、改行が入力され、そのまま誤爆である。
誤爆してもかまわないとき、例えばファイル名とかは、エンターを押してすぐに名称変更できるのはとてもいい。
要は、ファイルの整理中に間違えて削除ボタンを押してしまい、確認もなしにそのまま完全に削除されてしまう。みたいな感じ。怖い。