文字数制限をするためにkyeupの使用を試みています。
以下のコードを書きました。
jQuery.noConflict();
(function($) {
"use strict";
// カウント用
kintone.events.on(['app.record.edit.show',
'app.record.create.show'],
(e) => {
let FieldName = 'Sample'; // カウントしたいフォームのフィールドコード
let MaxMojisu = 10; // 制限の文字数
/ ***********************************************
* 文字カウント処理
*
*********************************************** /
let i = 0; // eq番号
let FieldCode;
// カウントしたいフィールドを探す
while($('.control-label-gaia').eq(i).text()){
if ($('.control-label-gaia').eq(i).text() != FieldName ){
// alert('一致しなかった');
} else {
FieldCode = $('.control-label-gaia').eq(i).attr('class');
// cybouzuのclass名＝.field-[codeNo]
FieldCode = '.field-' + FieldCode.substr(25,FieldCode.length-25);
}
i++;
}
// フィールドコードをもとにカウンタset
$(FieldCode).find('input').addClass('MojiCount');
$(FieldCode).append($('<span class=MojiCount>').text(0));
// count処理
let cntVal;
// キー入力が発生する度に実行
$('.MojiCount').keyup(function(){
// テキストエリアのvalueから文字列の長さを取得して、
// 文字数を表示
cntVal = $(this).val().length;
$('.MojiCount').text(cntVal+'文字');
// もし字数超えてたらカット
if(cntVal > MaxMojisu){
alert(MaxMojisu + '字超えた');
let fooStr = $(this).val();
$(this).val(fooStr.substr(0,MaxMojisu));
// テキストエリアのvalueから文字列の長さを取得して、
// 文字数を表示
cntVal = $(this).val().length;
$('.MojiCount').text(cntVal+'文字');
} else {
}
});
});
return e;
})(jQuery);
FireFoxでは動きます。
chromeで動かすと2文字打つとカーソルが無くなります。
IEだとカウンタ自体がappend出来ていない様子でした。
何が原因だと考えられるでしょうか。
プログラミング知識も浅く、そもそもkeyupより有効な方法などもあれば
併せてご指摘アドバイス等いただけないでしょか。
宜しくお願いいたします。
McKee さん
いくつか問題があります。
アロー関数は、IE 未サポートだったような気がします。
return e; の位置が違っています。
input とカウント表示の クラスが同じで、ごっちゃになっています。
少し直してみました。アロー関数は直してください。
jQuery.noConflict();
(function($) {
"use strict";
// カウント用
kintone.events.on(['app.record.edit.show',
'app.record.create.show'
],
(e) => {
let FieldName = 'Sample'; // カウントしたいフォームのフィールドコード
let MaxMojisu = 10; // 制限の文字数
/ ***********************************************
* 文字カウント処理
*
*********************************************** /
let i = 0; // eq番号
let FieldCode;
// カウントしたいフィールドを探す
while ($('.control-label-gaia').eq(i).text()) {
if ($('.control-label-gaia').eq(i).text() != FieldName) {
// alert('一致しなかった');
} else {
FieldCode = $('.control-label-gaia').eq(i).attr('class');
// cybouzuのclass名＝.field-[codeNo]
FieldCode = '.field-' + FieldCode.substr(25, FieldCode.length - 25);
}
i++;
}
// フィールドコードをもとにカウンタset
$(FieldCode).find('input').addClass('MojiCount');
$(FieldCode).append($('<span class=MojiCount>').text(0));
// count処理
let cntVal;
var $mojiCount = $('.input-text-cybozu.MojiCount');
var $Count = $('span.MojiCount');
// キー入力が発生する度に実行
// $('.MojiCount').keyup(function() {
$mojiCount.bind("keyup change", function() {
// テキストエリアのvalueから文字列の長さを取得して、
// 文字数を表示
cntVal = $mojiCount.val().length;
$Count.text(cntVal + '文字');
// もし字数超えてたらカット
if (cntVal > MaxMojisu) {
alert(MaxMojisu + '字超えた');
let fooStr = $(this).val();
$mojiCount.val(fooStr.substr(0, MaxMojisu));
// テキストエリアのvalueから文字列の長さを取得して、
// 文字数を表示
cntVal = $(this).val().length;
$Count.text(cntVal + '文字');
} else {
}
});
//初期設定
$mojiCount.trigger("keyup");
return e;
});
})(jQuery);
rex0220さん、ありがとうございます！！！
アロー関数を修正して、chromeとIE両方で無事動きました！！！
ありがとうございます！！
恥ずかしながら、独学でコードを書いているので基本的なところすら自身では見落としてしまいます。
ご指摘いただいて勉強になりました。
今後とも宜しくお願いいたします。
たぶん、みんな独学で勉強しています。
書き方は、いろいろ沢山作って簡単な方法を探すうちに覚えます。
参考に、jQuery でループ処理する場合は、each が便利です。
また、項目名に Sample が含まれているものが対象の 1つの場合は、下記のように取得できます。
let cntVal;
var $field = $('.control-label-gaia:contains(' + FieldName + ')').parent().append($('<span class=MojiCount>').text(0));
var $mojiCount = $field.find('input');
var $Count = $('span.MojiCount');