textareaの指定文字数以上の表示について

質問

こんにちは

当方PHPにてある管理サイトを作っています。

textareaの要件で、最大入力値2000文字のエリアで、
20文字を越えたら　・・・・ と表示する事になりました。

replaceなどを使って変換してもいいのですが、
元データが失われ、さらには何レコードもデータが存在するので、
見え方だけを変更したいのですが、可能でしょうか。

尚、初期画面ではそのtextフィールドは編集不可で、
クリックして始めて編集可能となります。
編集可能の時は2000文字表示させるつもりです。

無知で申し訳ありません、ご教授願えないでしょうか。

回答No.3

fujillin · ベストアンサー

#1、#2です。

＞そのイベントも理解しているつもりではいたのですが、
＞２０文字以上は「・・・」表示にする方法が直ぐに分からなかった
＞ので、イベントをお聞きした次第です。
う～ん…
どこまでがどのように出来ているのかまったくわかりませんので、どのような回答をすればよいのやら…

イベントはこんな感じ。
http://www.pu-kumamoto.ac.jp/~matsuno/zemi2/JavaScript/JSEvent.html
もう少し詳しくなら
http://www.tohoho-web.com/js/onevent.htm
（もっと詳しいのもありますが、まずはこのあたりで）

＞＞replaceなどを使って変換してもいいのですが、元データが失われ
replaceで変換することと、データが失われる（？）ことには関係がないのでは？
（「元データ」の意味するところが不明ですけど…）

＞２１文字以上は切り取ってreplaceをかけるようなやりかたでいいのでしょうか。
replaceというよりも単に20文字分に"…"を付け加えればよいだけでは？
　var str = textarea-element.value;
　if(str.length>20) str = str.substr(0,20) + "…";
のようなのではだめでしょうか？

＞＞さらには何レコードもデータが存在するので、
2000文字を超えるようなtextareaがいくつも存在するのって、想像するだけで凄い感じ。
もう少しUIを考え直した方が良さそうな気がしますけれど、それだけの数を同時に表示する必然性があるのでしょうか？（←いらぬお世話ですけど…）

メニュー的に一部が表示（あるいはデータの識別子が表示）されている画面があって、そこで対象を選択したら、編集画面に移る（あるいは編集エリアに対象の内容が表示される）ようなイメージで、更新はデータ毎に行なうような考え方の方が使う側にもわかりやすそうな気がしますが。（←何もわかってないのに、これまたいらぬお世話ですね）

＞２０文字以上はやはり全体を保持しつつ、～～
保持する/しないは自由です。短縮表示できれば良いだけというならオリジナルは不要でしょう。
でも、編集するのだと思ってましたけど、しないのかなぁ。

Web上で編集したら、その後はどうするつもりなんだろうか。サーバ側のcgiやスクリプトは出来ているのだろうか？

お礼

何度も何度もありがとうございました。

>←何もわかってないのに、これまたいらぬお世話ですね
いえいえ、教えていただいて感謝しております。

>var str = textarea-element.value;
　if(str.length>20) str = str.substr(0,20) + "…";
このやり方で見当してみます。

２０００文字エリア(表示21文字以降"・・・"表示)を編集し、
その後修正ボタンを押下した際に、
他項目と一緒に修正画面に遷移する方法を取るやり方です。
その際、$_SESSION(PHP)で保持する為、
21文字以降は正規データで遷移させなくてはいけなく、
その時にはDBにアクセスしないと言う仕様なので、

実際に作り込む際は、仰る通りのやり方でやるか、
もう一つtextareaを作って、そのエリアには
正規データが入り(CSS display:none)、
編集の際そのデータを使うと言うやり方の

２点から模索したいと思います。

何度もご丁寧にありがとうございました。

回答No.2

fujillin

#1です。

＞やはりhtmlでは出来ず、javascriptなんですね
あれっ！

＞＞クリックして始めて編集可能となります
ということから、てっきり、すでにjavascriptを利用しているのかと推測したのですが…
それなので、スクリプトを使うことには問題はないだろうと思った次第です。
違ったのでしょうか？

＞もし、ご存知ならそのイベントを教えて頂けると幸いです。
ご質問文の「クリック」ならonclickなど、#1の「フォーカス」をとるならonfocusなど。
あるいはaddEventListener('click', ～～～　などを用いるとか。

想像では、すでにそのイベントに対して、編集化にするための処理が記述されているのではないかと思いますが、そこに追加すればよいのではないでしょうか？

補足

ご親切にありがとう御座います。

補足が足りずに誠に申し訳ありません。
>すでにjavascriptを利用しているのかと推測したのですが…
まだ利用はしていなかったのですが、恐らくjQueryを
利用するものだと認識はしていました。

そのイベントも理解しているつもりではいたのですが、
２０文字以上は「・・・」表示にする方法が直ぐに分からなかったので、イベントをお聞きした次第です。

２０文字以上はやはり全体を保持しつつ、２１文字以上は切り取って
replaceをかけるようなやりかたでいいのでしょうか。

なんども申し訳ありませんが、宜しくお願い致します。

回答No.1

fujillin

Webページの表示ってことでいいのですよね？

＞初期画面ではそのtextフィールドは編集不可で、
＞クリックして始めて編集可能となります
ということなので、想像するにjavascriptを利用しているのではないかと思いますが、
そのままだと、スクリプトオフのユーザは編集不可のままということになりませんか？
あるいは、キー操作のみで編集しようとしても（タブキーでフォーカス）編集不可のまま？

それは、まぁ、置いておいて、
スクリプトを利用してよいのなら、ソースとしては全データのtextareaを出力しておいて、スクリプトで20文字表示のtextareaを代わりに表示しておくというのではどうでしょうか？
クリックされたら、オリジナルのtextareaの表示に戻すとか…

補足

返答が遅くなってすみません。
やはりhtmlでは出来ず、javascriptなんですね。
ありがとう御座います。

jQueryの機能を探してみたいと思います。
もし、ご存知ならそのイベントを教えて頂けると幸いです。

以上、宜しくお願いします。