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

Asked 31/5, 2012 at 18:35 Answered 15/1, 2018 at 19:41

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

Khano answered 31/5, 2012 at 18:35 Comment(5)

Not in a simple input field. Look for editable divs instead or simply don't. – Uppish 31/5, 2012 at 18:37

You don't, unless you create an element that overlays the input perfectly, and that's a total nightmare. The way RTEs do is by using an iframe with the content so they can maniuplate it. – Osrick 31/5, 2012 at 18:37

duplicate question as here https://mcmap.net/q/746400/-just-trying-to-give-a-bold-font-to-an-input-text – Paragrapher 31/5, 2012 at 18:53

@khaled_webdev: Not a duplicate. That question is about bolding an entire text input. This question is about bolding only part of the text input. – Longshore 31/5, 2012 at 19:2

ok, how defining which text will be bold – Paragrapher 31/5, 2012 at 21:11

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>

Bequest answered 31/5, 2012 at 19:4 Comment(2)

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 – Khano 1/6, 2012 at 16:36

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. – Bequest 1/6, 2012 at 18:45

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.

Oriental answered 31/5, 2012 at 18:52 Comment(0)

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.

Longshore answered 31/5, 2012 at 18:45 Comment(2)

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? – Khano 1/6, 2012 at 16:38

@clinchergt: I'd have to see some sample code that you used to help with that. – Longshore 1/6, 2012 at 18:49

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.

Aruspex answered 15/1, 2018 at 19:41 Comment(0)

Recommended topics

Hot tags