Q&A
<textarea readonly></textarea>にしても、カーソルは表示されると思うのですが、現象を再現するコードを掲載いただけますか？カーソルというかキャレット(｜)のことでしょうか？
「[A]と書かれたボタンを押すとテキストエリアにAと表示させる が、その際スマホのキーボードは表示させない」
というような処理をしています。
「スマホのキーボードは表示させない」がtextareaのreadonlyをtrueにすることで解決できましたが、その際にキャレットも消えてしまいます。（入力できないので当然ですが）
キーボードによる入力はできないけど（スマホのキーボードは表示させないけど）、
キャレットだけは表示させる（もしくはあたかもキャレットが表示されているように見える）ようにするにはどうすればいいでしょうか？
例えば、こんな感じのことがやりたいです。
https://jsfiddle.net/moscwa11/xpvt214o/638453/
(事前にどこにAが追加されるのかわかるような感じに)
すみません、キャレットのことです。修正しました。
いずれにしても再現確認のためには現在のコードを提示された方が良いです。現在どこまでできていてどこができていないか、文章だけでは誰も分かりませんので。
二重投稿のため削除。
編集不可のtextareaにフォーカスされている時に、なぜ、キャレットを表示させたいか不明ですが、「あたかもキャレットが表示されているように見える」ことが実現できれば良いのであれば、textarea要素の後にspan要素か何かでキャレットをposition: absoluteでtextarea上に表示させてあげれば良いと思います。必要であればキャレットの点滅もcss transitionかanimationで行えば良いかなと。
例えば...に提示されているリンク先で確認しましたが、Chromeではキャレットは表示されません。readonlyの入力欄にキャレットが出るか出ないかはブラウザの仕様によると思いますので、キャレットで制御するのは無理だと思います。HayatoKamonoさんが書かれているようにキャレットのようなものを自前で表示させるしかないと思いますので、その方向でチャレンジしてみたらいかがでしょうか。
あなたの回答
tips
プレビュー
