いつもお世話になっております。
テキストエリアの入力文字数制限として、文字数に応じたバイト数が
入力中に表示される機能を実装したいと考えております。
(半角→1バイト、全角→2バイト、改行→0バイトと設定)
record[‘テキストエリア’].valueで入力された値を取得したいのですが、
方法がわからず、.value-XXXXXXX textareaでテキストエリアを指定しています。
何か良い方法がありましたら、ご教示いただければと思います。
よろしくお願いいたします。
jQuery.noConflict();
(function($) {
"use strict";
/*##################################
# 関数宣言
####################################*/
// 入力された文字数を計算
function countLength(str) {
// CRLF, CRを、LFの改行コードに変換 \r(CR+LF)：Windows系OSの改行、\r(CR)：古いMac OS（9以前）の改行
str = str.replace("\r", "").replace("\r", "");
var r = 0;
for (var i = 0; i < str.length; i++) {
const c = str.charCodeAt(i);
// Shift_JISの半角: 0x0 ～ 0x80, 0xa0 , 0xa1 ～ 0xdf , 0xfd ～ 0xff
// Unicodeの半角 : 0x0 ～ 0x80, 0xf8f0, 0xff61 ～ 0xff9f, 0xf8f1 ～ 0xf8f3
if(c == "".charCodeAt(0)){ // 改行コードLF
r += 0; //改行は0文字分
}
else if((c >= 0x0 && c < 0x81) || (c == 0xf8f0) || (c >= 0xff61 && c < 0xffa0) || (c >= 0xf8f1 && c < 0xf8f4)){
r += 1; //半角は1文字分
}
else {
r += 2; //全角は2文字分
}
}
return r;
}
// 「理由」フィールドに文字が入力されると文字数を自動表示、400文字を超えると赤字で表示
function setByteCounter(textbox, counterSpan, nMax) {
textbox.keyup(function() {
const nCnt = countLength($(this).val());
// {0} / {1} = {入力文字数} / {最大文字数}
const counterText = "({0} / {1})".replace("{0}", nCnt).replace("{1}", nMax);
// 文字数をカウントし画面に表示
counterSpan.text(counterText);
// 最大文字数を超えたら赤字表記に変化
counterSpan.css("color", (nCnt > nMax ? "red" : "gray"));
});
textbox.keyup();
}
/*##################################
# イベント処理
####################################*/
// 「理由テスト」フィールドに入力された文字数をカウント(全角・改行は2文字分、半角は1文字分)
kintone.events.on(['app.record.create.show',
'app.record.edit.show',
'app.record.index.edit.show',
],
function(event){
const maxLength = 400;
setByteCounter($(".value-5522745 textarea"), $(".control-value-label-gaia div font"), maxLength);
return event;
});
// 半角400文字以上の場合は保存ボタン押下時にエラー表示
kintone.events.on(['app.record.create.submit',
'app.record.edit.submit',
'app.record.index.edit.submit',
],
function(event) {
const maxLength = 400;
if(countLength($(".value-5522745 textarea").val()) > maxLength){
event.error = "文字数は半角" + maxLength + "文字以内で入力してください";
}
return event;
});
})(jQuery);