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

javascript html text input bold

27,450

Solution 1

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>

Solution 2

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.

Solution 3

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.

27,450

Author by

clinchergt

Updated on January 16, 2020

Comments

clinchergt over 4 years

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
clinchergt almost 12 years

I'm gonna give this answer a shot, I tested it outside the page I'm working on, and it seems to work well enough. Thanks
clinchergt almost 12 years

This might be the most simple solution, I'll definitely use this if I can't get Mic's solution to work on the actual page. I actually tried to get the innerHTML so the form could get it but I wasn't successful, it just ignores the html code. Could it be because I used GET and not POST?
Mic almost 12 years

Beware that you start an unusual route, and may run with some surprises along the way. Another approach would be to have an input field where you type and below the formatted result. Like when you answer questions here.
Travesty3 almost 12 years

@clinchergt: I'd have to see some sample code that you used to help with that.