【jQuery】三点リーダーで省略表示したinputのvalueを、送信時には省略なしで送信したい

リストの中の選択肢を選ぶと、inputのvalueが変更される。
また、６文字以上であれば三点リーダで省略するという実装をしています。

jQuery
1<body>
2    <div>
3        <form action="">
4            <input type="text" id="fromText"></input>
5            <button>送信</button>
6        </form>
7    </div>
8    <div>
9        <ul id="select">
10            <li>１選択するホゲホゲホゲホゲホゲホゲホゲホゲホゲ</li>
11            <li>２選択するホゲホゲホゲホゲホゲホゲホゲホゲホゲ</li>
12            <li>３選択するホゲホゲホゲホゲホゲホゲホゲホゲホゲ</li>
13        </ul>
14    </div>
15    <script>
16        $('#select li').on('click',function() {
17            var getText = $(this).text();
18            if(getText.length >= 6) {
19                var getTextCat = $(this).text().substring(0,6) + '...';
20                $('#fromText').val(getTextCat);
21            }
22        });
23    </script>
24</body>

わからないこと

・送信する際には、三点リーダーで省略されていないテキストを送りたい場合、
どのようにするのがスマートでしょうか？？
※個人的に思いついたのは、送信ボタンを押した時に三点リーダーに省略する前の
テキストをinputに適用させるというものですが、この実装方法は一般的なのか。
また、これ以外に良い方法がありましたら教えていただきたいです。

よろしくお願い致します。
教えていただきたいです

行動規範の内容に同意します

回答2件

・送信する際には、三点リーダーで省略されていないテキストを送りたい場合、
どのようにするのがスマートでしょうか？？

ちょっと観点が違うかもしれませんが、CSS で三点リーダーを出すようにすれば、
プログラムで分岐する必要がなくなるのではないかな、と思いました。

css
1width: 100px;
2overflow-y: hidden;
3text-overflow: ellipsis;

投稿2019/10/05 02:43

tanishi_a

総合スコア484

decteckaaaaaaaa

2019/10/10 15:47

ご回答ありがとうございます！こちらinputでも再現可能でしょうか？

tanishi_a

2019/10/11 15:11

IEの場合はスクリプトが要るけど、それ以外は出来る、みたいですね。 https://frontendtricksandmagic.wordpress.com/2015/03/07/how-to-make-text-overflow-ellipsis-work-for-inputs-in-ie/

行動規範の内容に同意します

ベストアンサー

#fromText に値を入力するときは必ず #select からで、キーボードで直接入力はさせないのであれば、省略表示した文字列は表示用の要素に入れてしまえばいいと思います。

html
1<form action="">
2    <p id="fromText-preview"></p>
3    <input type="hidden" id="fromText"></input>
4    <button>送信</button>
5</form>
6<!-- 中略 -->
7<script>
8    $('#select li').on('click',function() {
9        var getText = $(this).value();
10        var getTextCat = getText;
11        if(getText.length >= 6) {
12            getTextCat = getText.substring(0,6) + '...';
13        }
14        $('#fromText').val(getText);
15        $('#fromText-preview').html(getTextCat);
16    });
17</script>

そうではなくて、キーボード直接入力も許すのであれば、dataset などに省略前の値を入れておけばいいと思います。

html
1<form action="">
2    <input type="hidden" id="fromText"></input>
3    <button>送信</button>
4</form>
5<!-- 中略 -->
6<script>
7    $('#fromText').on('change', function() {
8        $(this).dataset.rawValue = $(this).value();
9    });
10    $('form').on('submit', function(evt) {
11        evt.preventDefault();
12        var fromText = $('#fromText').dataset.rawValue;
13        // submit処理...
14    });
15    $('#select li').on('click',function() {
16        var getText = $(this).text();
17        var getTextCat = getText;
18        if(getText.length >= 6) {
19           getTextCat = getText.substring(0,6) + '...';
20        }
21        $('#fromText').val(getTextCat);
22        $('#fromText').dataset.rawValue = getText;
23    });
24</script>

普段jQueryは使わないので、記法に変なところがあるかもしれませんが、適宜読み替えてください。

投稿2019/09/29 14:15

thyda.eiqau

総合スコア2982

decteckaaaaaaaa

2019/09/29 14:29

ご回答ありがとうございます！以下のメソッドは、どういった意図で使われているのでしょうか？？ .dataset（MDNで調べたところ「このプロパティは、要素上に設定された全てのカスタムdata属性(data-*)の、読み取りと書き込みの両方のモードでのアクセスを許可します？？」） .rawValue（調べましたがヒットせず。。。）

thyda.eiqau

2019/09/29 16:50 編集

datasetというのは、HTMLElementが持つ (= 要素上に設定された) プロパティ領域みたいなもので、自由に値をセットしたり、セットした値を読み取ったりすることができ (= 読み取りと書き込みアクセスを許可) ます。rawValueというのは私が勝手につけた変数名です。 HTMLで <input type="text" data-raw-value=""> みたいな感じで定義しておくこともできます

decteckaaaaaaaa

2019/10/05 00:54

なるほど、こちらで解決しました！ありがとうございます！

行動規範の内容に同意します

あなたの回答