textarea改行不可

Question

あるjqueryをベースに制作しておるサイトについてですが、
textareaを設定しても、複数行に改行して入力することができずに困っております。
（テキスト入力時、Enterキーを押しても改行されない）
CSS、javascript など、わかる範囲で調べましたが、原因不明です。
どこに問題があるか、アドバイスをお願いします。

Answer

ECマスターズの田中です。

原因を探るためには、
実際のページを確認させていただく必要がございますので、
該当ページのURLを、
返信もしくは「投稿内容について報告する」より
お知らせいただきますようお願いします。

Answer

田中様
ありがとうございます。

先ほど、「投稿内容について報告する」から連絡致しました。
ご回答、お待ちしております。

Answer

ECマスターズの田中です。

いただいたページのソースを確認したところ、
JavaScriptによって、ページ全体で
F5キーおよびEnterキーの入力が妨げられていることがわかりました。

「design.php」より出力された、下記のソースです。
= この下の行から ====================
   $(window).on('keydown', function(e) {
      // F5,enterを抑制
        if( e.type == 'keydown' && (e.which && e.which === 13) || (e.keyCode && e.keyCode === 13) || (e.keyCode && e.keyCode === 116)  ) {
            return false;
        }
    });
= この上の行まで ====================

上記ソースの中で
(e.which && e.which === 13) || (e.keyCode && e.keyCode === 13)
が、入力されたキーがEnterかどうか判定する部分となっておりますが、

おそらく、
入力途中のフォーム誤送信や、
想定外の改行入力を防ぐ意図で
設置されている仕組みだと考えられます。

この条件を外すことで、
誤動作や表示乱れなどが発生する可能性がございますので、
実際に外す前に、テスト環境などご用意の上、
十二分に動作確認を行っていただきますようお願いします。

Answer

田中様、ありがとうございます。
該当箇所をコメントアウトすることで、改行できるようになりました。

今回の改行できなかったtextareaのすぐ上に既にinput （テキストボックス）があります。

操作すると、そのテキストボックスに、テキストエリア内に入力した文字が表示されると思いますが、
テキストボックスの為、１行になってしまいます。

その部分も、テキストボックスで表示させたいと思います。
単純にinput ではなく、 textarea に打ち換えても、うまく進みませんでした。

併せて、ローカル内で、input[type="text"]を検索し、
var insert_text = document.querySelectorAll('#borad input[type="text"].insert-text');
を、
var insert_text = document.querySelectorAll('#borad textarea.insert-text');
に変更してもうまく進みません。

ご指導お願いいたします。

Answer

ECマスターズの村井です。

休み明け担当より返答いたしますので、
お時間いただきますが、少々お待ちくださいませ。

Answer

ECマスターズの田中です。

同じくdesign.phpの中で読み込まれております
fontItem.jsの中にも、同じセレクタ
#borad input[type="text"].insert-text
の記述がございますので、
まだ変更されていない場合は、こちらの変更もお試し願います。

変更前後、どちらにも対応できるよう
#borad .insert-text
へご変更いただくことをお勧めします。
（insert-textクラスが複数存在しないことをご確認の上、ご変更ください）

Answer

ありがとうございます。

#borad input[type="text"].insert-text
を、検索し、すべて　#borad .insert-text　に変更しました。

投稿時点で、変更後の状態です。

操作していただくとお分かりかと思いますが、途中読み込みが終わらず、うまく進みません。

よろしくお願いいたします。

Answer

ECマスターズの田中です。

「この商品のデザインを作成する」ボタンを押した直後に
途中読み込みが終わらなくなる、
という状態でよろしいでしょうか。

私にて状況を確認したところ、同じ状態になったのですが、
ページの再読み込みを行うと無事動作するようになりました。

・スーパーリロードを行う
https://liginc.co.jp/web/tool/browser/47339
・プライベートブラウズ（シークレットモード）を利用する
https://support.google.com/chrome/answer/95464 （Google Chromeの場合）
・ブラウザの設定画面から、キャッシュを削除する
・普段ご利用されているブラウザ以外のブラウザ・PCで表示

など、お試しいただきますようお願いします。

Answer

田中様、ありがとうございます。

＞「この商品のデザインを作成する」ボタンを押した直後に
＞途中読み込みが終わらなくなる、
＞という状態でよろしいでしょうか。

そうですね。その状態です。
キャッシュクリアして、シークレットモードでスマホ（Android）で確認しましたが、
状態は変わらずです。

Answer

【補足】

 $('#borad .insert-text').on('input keyup',function(){
を
 $('#borad .insert-text').on('textarea keyup',function(){
へ修正したところ、スムーズに読み込みが行われます。
この記載方法には間違いないでしょうか。

Answer

ECマスターズの田中です。

タグのままでも、スムーズに読み込みが行われた、
ということでよろしいでしょうか。

> この記載方法には間違いないでしょうか。

今回ご変更いただいた「input」は、
タグ名ではなく、イベントの名前です。
下記ページのように使われます。
https://ginpen.com/2018/01/30/realtime-form-values/

textareaにご変更されますと、
少なくとも開発者の想定していない状態になります。

【補足】の内容変更と共に、
先の返信のタグ→タグへの変更が
無事適用された、という可能性もございますので、

今一度、on('textarea から on('input に
戻していただいた上で、
スムーズな読み込みが維持できるかどうか、
ご確認いただきますようお願いします。

Answer

ありがとうございます。
on('input に戻し、スムーズに読み込みがされます。

理想通りになりました。
ありがとうございました。