[SOLVED] Bold a Certain word in an HTML Textbox

Bold a Certain word in an HTML Textbox

I am creating a report using Telerik reporting tool and I need to bold some specific words in the HTML Textbox.

for instance, my textbox contains this text: "I am Kim and I am a girl". and I only want to Bold the word "I", so it will come out as "I am Kim and I am a girl". how can I do that?

I cannot just put the bold tag around "I" since the value of my textbox is dynamic, It can change during runtime. is there any way to set it using some sort of "If-Statement" ? like the program will read each word in the textbox and then if word is equal to "I" then bold. so that if the value of the textbox changes to "I like it" then it will automatically display as "I like it".

Please help me. thanks in advance.

Solution

Try this answer from https://stackoverflow.com/users/166491/mic

You can get what you want by making this your base knowledge. It works fine.

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