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

问题

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

回答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>

回答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.

回答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.