Как вы делаете только текст, внутри текстового поля ввода, жирным шрифтом?

Я пытаюсь получить полужирный текст, внутри текстового поля ввода. Я не уверен, как это сделать, поскольку код html не интерпретируется внутри текстового поля, поэтому ничего подобного <b> не будет работать. Можно ли выделить только какой-то текст? Такие методы, как bold(), только добавляют <b> к строке.

Спасибо

Ответы

Ответ 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>

Ответ 2

Это зависит от того, какие браузеры вы хотите поддерживать. Если вы просто хотите поддерживать браузер HTML5, просто запустите 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 для управления накладными расходами. Это может быстро стать уродливым, хотя.

Ответ 3

Возможно, возможным решением было бы использовать редактируемый div, например:

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

Если вы пытаетесь представить это значение в форме, вам нужно будет использовать JavaScript, чтобы получить innerHTML этого div и назначить его скрытому вводу или что-то в этом роде.

Ответ 4

Попробуйте следующее:

<input type="text" style="font-weight: bold;" value="Some Value" />

Но таким образом весь текст внутри элемента будет выделен жирным шрифтом. Я предполагаю, что нет простого способа стилизовать только фрагмент текста

Ответ 5

нам нужно что-то вроде вида android, который позволяет настраивать html пользовательскую разметку, распознавание ссылок и т.д., изначально... это проблема.

Ответ 6

Самый верный способ иметь такую ​​вещь - создать собственный настраиваемый элемент.

вы можете создать свой собственный элемент <my-input></my-input> и настроить свой собственный вход.