How do you make just some text, inside an input text field, bold?

StackOverflow https://stackoverflow.com/questions/10839279

Pregunta

I'm trying to get bold specific text, inside an input text field. I'm not sure how to go about it since html code isn't interpreted inside a text field, so anything like <b> won't work. Is it possible to bold just some text? Methods like bold() only add <b> around the string.

Thanks

¿Fue útil?

Solución

Here is one trick.

An INPUT field is over a SPAN. With a an example of function that puts the 3 first chars in bold. You may run into transparency trouble with older browser. In that case you can leave the normal input field without the bold effect.

<!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>

Otros consejos

It depends on what browsers you want to support. If you just want to support HTML5 browsers just drop in a div with the contenteditable flag set and style it with css to look like an input.

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

If the bold is in a very controlled area, than maybe do something like:

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

Using CSS to style it and JS to manage the overhead. This could quickly get ugly though.

Perhaps a possible solution would be for you to use an editable div, like this:

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

If you are trying to submit this value in a form, you'll have to use JavaScript to get the innerHTML of this div and assign it to a hidden input or something.

we need something like the android view, which allows custom html markup, link recognition etc, natively... thats the problem.

The most true way to have such a thing is to build your own custom element.

you can create your own <my-input></my-input> element, and customise your own input.

Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top