フォームのテキストエリアのテキストの最後に文字を自動で付与したい

Question

ユーザの入力間違いを防ぐため、
テキストエリア内のテキストの最後に絶対に「なう（仮）」と表示させたい。
「なう」というのは実際のテキストでなくて画像でも良いのですが。。
「なう」はユーザには消せない文字。
「なう」にはフォーカスできない。

• フォーカス前。 例文が入っている。 （これはplaceholderで実現可能）
• フォーカス時 例文が消えて、「なう」だけ入っている。
• 文章入力時 文章の最後に「なう」が固定で入っている。（マウスカーソルのフォーカス場所はどこでも関係なく、テキストの最後に「なう」が固定でくっついている。）

わかりにくいと思いますので、
画像にしてみましたので添付します。

Answer 1

この「なう」は当然textarea内に入力されている文字列ではありませんね。
textareaの背景を透明か半透明にしておいて、背後に別口で表示するものです。

背後に表示するとしてその座標はどうやって取得するか？
http://qiita.com/yuku_t/items/fb92e173120d7b2e49ed
このように、textareaとまったく同じ体裁・書式の要素を隠しで用意してここに同じ文字列を流し込み、カレットの位置を完全に再現させるという手段を用います。

示した記事はカレットの座標を求めるのが目的なので完全再現文字列の直後にspanを置いてそのspanの座標を取得していますが、「なう」を表示するだけだったら、textareaの背後に透明な文字で完全再現文字列を作り、その直後に「なう」の入ったspanを置くので十分ですかね。

Comments

[sin1999]

そんなことができるのですね。
ありがとうございます！