私は大胆な特定のテキストを入力テキストフィールド内に入れようとしています。 htmlコードはテキストフィールド内で解釈されないので、どうすればよいか分かりません。<b>のようなものは動作しません。テキストだけを太字にすることは可能ですか？ bold（）のようなメソッドは文字列の周りに<b>を追加するだけです。入力テキストフィールド内のテキストを太字にするにはどうすればよいですか？
<input type="text" style="font-weight: bold;" value="Some Value" />
しかし、この方法で要素内のテキスト全体が太字になります。
おかげ
ここに1つのトリックがあります。
INPUTフィールドはSPAN上にあります。 3つの最初の文字を太字で表示する関数の例を示します。 古いブラウザでは、透過性の問題が発生することがあります。その場合は、太字のエフェクトを使用せずに通常の入力フィールドを残すことができます。私たちは、カスタムHTMLマークアップを可能にアンドロイドビューのようなもの、リンク認識などが必要
<!DOCTYPE html>
<html lang="en">
<head>
<title>transp</title>
<style>
div{
position:relative;
}
input, span{
top:0;
position:absolute;
width:120px;
}
span{
top:2px;
left:2px;
z-index:1;
overflow:hidden;
}
input{
background:transparent;
z-index:2;
}
</style>
</head>
<body>
<div>
<input onkeyup="bold3(this)" />
<span id="back"></span>
</div>
<script>
function bold3(inp){
inp.style.color = 'transparent';
var span = document.getElementById('back');
span.innerHTML =
'<b>' +
inp.value.substr(0, 3) +
'</b>' +
inp.value.substr(3);
}
</script>
</body>
</html>
私はこの答えを一発与えるつもりです。私が作業しているページの外でテストしましたが、十分にうまくいくようです。おかげで – clinchergt
あなたは珍しいルートを開始し、道に沿っていくつかの驚きを実行することがありますことに注意してください。もう1つのアプローチは、入力した場所とその結果の下にある入力フィールドを持つことです。あなたがここで質問に答えるときのように。 – Mic
はこれを試してみてください。あなたは、この値を提出しようとしている場合
<div contentEditable="true">
Lorem <b>ipsum</b> dolor
</div>
：私はこのように、あなたが編集可能なdiv要素を使用するために、おそらく可能な解決策は以下のようになり、テキスト
OP入力したい部分の太字を入力してください。 –
の唯一の作品のスタイルを設定する簡単な方法はありません推測しますフォームでは、JavaScriptを使用してこのdivのinnerHTMLを取得し、それを非表示の入力などに割り当てる必要があります。
これは最もシンプルな解決策かもしれませんが、マイクのソリューションを実際のページで動作させることができない場合は、これを必ず使用します。私は実際にフォームがそれを得ることができるようにinnerHTMLを取得しようとしましたが、私は成功しませんでした、それはちょうどhtmlコードを無視します。 POSTではなくGETを使用している可能性がありますか？ – clinchergt
@clinchergt：私はそれを助けてくれたサンプルコードを見なければならないでしょう。 – Travesty3
サポートするブラウザによって異なります。単にHTML5ブラウザをサポートしたいのであれば、contenteditableフラグを設定したdivをドロップして、それをcssで入力のようにスタイルします。
<div contenteditable>Text <b>bold</b></div>
太字は多分ような何かよりも、非常に管理区域内にある場合：オーバーヘッドを管理することとJSのスタイルをCSSを使用した
<div>
<input type="text" style="font-weight: bold;" value="Bold text" />
<input type="text" value="This is not" />
</div>
を。これはすぐに醜いことができます。
は、ネイティブ...問題のthats。
このようなことを行う最も真の方法は、独自のカスタムエレメントを作成することです。
独自の<my-input></my-input>要素を作成して、独自の入力をカスタマイズすることができます。
単純な入力フィールドにはありません。 [editable divs]（http://blog.whatwg.org/the-road-to-html-5-contenteditable）を探してください。代わりに、そうしないでください。 –
入力を完全にオーバーレイする要素を作成しない限り、それは完全な悪夢です。 RTEのやり方は、iframeをコンテンツとともに使用して、それをマニピュレートすることです。 – MetalFrog
ここでの重複した質問[http://stackoverflow.com/questions/5408292/just-trying-to-give-a-bold-font-to-an-input-text](http://stackoverflow.com/questions）/5408292 /入力しようとすると大胆なフォントを入力するテキスト） –