将 HTML 文本框中的某个单词加粗

Bold a Certain word in an HTML Textbox

我正在使用 Telerik 报告工具创建报告,我需要在 HTML 文本框中加粗一些特定的词。

例如,我的文本框包含以下文本:"I am Kim and I am a girl"。我只想加粗 "I" 这个词,所以它会显示为“I am Kim and I am a girl” .我怎样才能做到这一点?

我不能只将粗体标记放在 "I" 周围,因为我的文本框的值是动态的,它可以在运行时更改。有没有办法使用某种 "If-Statement" 来设置它?就像程序将读取文本框中的每个单词,然后如果单词等于 "I" 则加粗。这样,如果文本框的值更改为 "I like it",那么它将自动显示为“ 喜欢它”。

请帮帮我。提前致谢。

试试这个来自 https://whosebug.com/users/166491/mic

的答案

你可以通过将其作为基础知识来获得你想要的东西。它工作正常。

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