テキストエリアを遮るテキスト

テキストエリアに基本的な書式設定を行うために、同じモノスペースのフォントと位置でdivを配置します。 divには同じテキストが表示されますが、色と太さが表示されます。テキストエリアを遮るテキスト

しかし、div内のテキストが妨げられ、ユーザーはテキストエリア内のテキストを選択できなくなります。

<div class="centerc"> 
    <div class="copyc"> 
     <textarea id="input" class="ipadded epadded txtarea" rows=20 cols=80></textarea> 
     <div id="copyadd" class="copyadd"></div> 
     <!--THIS IS THE DIV FOR FORMATTING^--> 
    </div> 
</div>

-webkit-user-select：なし; -ms-user-select：なし;ユーザー選択：なし;この問題は修正されておらず、ユーザーはdiv内のテキストも選択できませんでした。それ以上のCSSコードが必要な場合はコメントしますが、これは必要ではないと思います。

どのようにして、divがユーザーがテキストエリアからテキストを選択できなくなるのを防ぐことができますか（可能な場合）？そうでない場合は、私が使用している方法の選択肢がありますか？

編集：最初から私は複数のタイプの書式設定を希望していたはずです。

出典

2017-10-27 ShuckleShackle

ないの答えが、quill.js https://quilljs.com/、私は私が来たと思う@TemaniAfif –

はあなたにも –

をCSSを追加することができますあなたに役立つかもしれませんすでに結論に達していますので、心配する必要はありませんが、とにかく感謝します。 – ShuckleShackle

テキストエリアに書式設定はできませんが、編集可能なdivを使用してテキストエリアを削除できます。それは少なくとも問題をより簡単にするでしょう。

この質問を参照してください：完全editable div

出典

2017-10-27 20:00:03 Enirdas

これは実行可能な選択肢のようです。ありがとうございました！これで複数の種類の書式をどのように達成できますか？ – ShuckleShackle

あなたは、例えば、ユーザは、親のdivの上にマウスを移動したときのdivの前にテキスト領域を置くCSSルールを追加することができ、このような何か：

.copyc:hover txtarea { 
z-index: 2; 
}

出典

2017-10-27 19:49:07

「divが親divにホバリングしているとき」という意味を完全に理解しているかどうかはわかりません。カーソルがテキストエリアの上を浮遊していることを意味しますか？ – ShuckleShackle

申し訳ありませんが、ええ、それは私が意味したものです –

あなたがしない理由divの内容を達成するために、textareaにCSSを追加してください。良い出発点は、逆に考えている<textarea>の様式化されているの容量拡大するためには

.dark-text { 
    font-weight: bold; 
    font-color: black; 
}

出典

2017-10-27 19:49:12 Tyler

私はテキストエリアの異なる部分を書式化したい、私はこれがテキストエリアでは不可能と信じています。 – ShuckleShackle

：編集可能な<div>を作ると...

<div id='divTextEditable' contenteditable></div>

「魔法の杖」ではありません、それには欠点がありますが、それは良い出発点です。

出典

2017-10-27 19:49:33 holden

コンテンツ編集可能な 'pre'要素では、テキストエリアをエミュレートする方がはるかに簡単です。 – Teemu

もし私ができるなら、この答えを受け入れるでしょう、私は他の人が少しだけもっと情報を持っていたと思います。これでどのように複数のタイプの書式設定ができますか？ – ShuckleShackle

テキストエリアを遮るテキスト

答えて

関連する問題