16

入力テキスト フィールド内で太字の特定のテキストを取得しようとしています。HTMLコードはテキストフィールド内で解釈されないため、どうすればよいかわかりません。そのため、次のようなものは機能し<b>ません。一部のテキストだけを太字にすることはできますか? bold() のようなメソッド<b>は、文字列の周囲に追加するだけです。

ありがとう

4

5 に答える 5

5

ここに1つのトリックがあります。

INPUT フィールドが SPAN を超えています。最初の 3 文字を太字にする関数の例を示します。古いブラウザでは透明性の問題が発生する場合があります。その場合、太字効果なしで通常の入力フィールドを離れることができます。

<!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>
于 2012-05-31T19:04:17.530 に答える
4

サポートするブラウザによって異なります。HTML5 ブラウザーをサポートするだけの場合は、contenteditable フラグを設定して div にドロップし、css でスタイルを設定して入力のようにします。

<div contenteditable>Text <b>bold</b></div>

太字が非常に管理された領域にある場合は、次のようなことをしてください。

<div>
    <input type="text" style="font-weight: bold;" value="Bold text" />
    <input type="text" value="This is not" />
</div>

CSS を使用してスタイルを設定し、JS を使用してオーバーヘッドを管理します。ただし、これはすぐに醜くなる可能性があります。

于 2012-05-31T18:52:38.657 に答える
2

おそらく、可能な解決策は、次のように編集可能な div を使用することです。

<div contentEditable="true">
    Lorem <b>ipsum</b> dolor
</div>

この値をフォームで送信しようとしている場合は、JavaScript を使用してこの div の innerHTML を取得し、非表示の入力などに割り当てる必要があります。

于 2012-05-31T18:45:48.070 に答える
0

カスタムhtmlマークアップ、リンク認識などをネイティブに許可するAndroidビューのようなものが必要です...それが問題です。

于 2016-09-26T14:46:30.697 に答える
0

そのようなものを持つための最も正しい方法は、独自のカスタム要素を構築することです。

独自の要素を作成し、<my-input></my-input>独自の入力をカスタマイズできます。

于 2018-01-15T19:41:48.923 に答える