フォームブリッジの画面で文字数表示

kintone カスタマイズ
1

ご存知の方が居ましたらお教えください。

フォームブリッジ上で複数行に書き込まれた文字数を同じ画面上でリアルタイムにカウント数を表示させる方法はございますでしょうか？

なにとぞよろしくお願いいたします。

2

Jqueryで実装してみました。問題なくonKeyUpにラベルに文字数を表示できます。

$( document ).ready(function() {

$(“body div.el-textarea textarea”).keyup(function() { # <---- テキストエリア
countCharacter(this)
});
});

 

function countCharacter(val) {
var len = val.value.length;
$(‘label.ql-editor’).html(len); # <---- 表示したいラベル
};

 

3

マエダ様

ご回答ありがとうございます。初心者ですいません。

追加質問をさせてください。

$(“body div.el-textarea textarea”).keyup(function() { # <---- テキストエリア

のどの部分がフィールドコードでしょうか？

$(‘label.ql-editor’).html(len); # <---- 表示したいラベル

も同じくどの部分がフィールドコードでしょうか？

また、Jqueryの設定方法が

Cybozu CDNのURLを設定したらいいのでしょうか

ちょっと試しましたが、解読できずすいませんが

追加で教えてください。

 

 

4

$(“body div.el-textarea textarea”).keyup(function() { # <---- テキストエリア

のどの部分がフィールドコードでしょうか？

> 今回はフィールドコードを利用していません。
      DOM Selector（body div.el-textarea textarea）でHTMLノードを選択します。

$(‘label.ql-editor’).html(len); # <---- 表示したいラベル
も同じくどの部分がフィールドコードでしょうか？

> 同上です。

 

Cybozu CDNのURLを設定したらいいのでしょうか

どこでも大丈夫です。Cybozu CDNでもグーグルでも

https://developers.google.com/speed/libraries/

ダウンロードしたjsファイルをカストマイズにアップロードしてください。

 

 

 

5

お世話になっております

トヨクモの友利と申します。

上記の方のでも実現可能ですが参考までに以下のコードでも可能です。

以下のJavascriptのコードをカスタマイズで読み込むことで可能です。

(function() {

"use strict";

const text = "text"; //複数行フィールドのフィールドコード
const count = "count"; //カウント数を表示したいフィールドのフィールドコード

fb.events.fields[text].changed.push(function (state) {
state.record[count].value = state.record[text].value.length;
})
    
})();
6

友利優希 様、前田様

他のアプリ作成で試す時間が無く、お礼が遅くなりました。

ありがとうございます。うまく行きました。

7

このトピックはベストアンサーに選ばれた返信から 3 日が経過したので自動的にクローズされました。新たに返信することはできません。