Javascript 设置文本框中第一个单词的背景色？

我的HTML中有一个文本框输入。我知道如何使用CSS设置整个事物的背景色（

background color

），但是否可以只设置第一个单词的背景色？我希望这样，如果有人输入，例如，“你好”，单词“你好”的背景颜色将变成橙色，但如果他们输入“你好”，单词“你好”将变成蓝色

---

我已经用jQuery和CSS设置了整个文本框的样式，但是是否可以只设置第一个单词的背景颜色？

我相信对于这样的文本框，textarea没有格式样式。但是你可以假装。我有两个想法：

将文本输入的背景色设置为透明，然后使用span、div等创建彩色背景。设置位置或边距，使文本框位于背景上方

编写或使用格式化文本编辑器，该编辑器使用html呈现文本

$（文档）.ready（函数（）{
$（'input'）.keyup（函数（）{
var str=$（this.val（）；
变量idx=str.indexOf（“”）！=-1？str.indexOf（“”）：str.length；
$（'span'）.text（str.substr（0，idx））；
$（this.css（'margin-left'，-$（'span'）.width（）-6）；
});    
});

你好
快速解决方案（不完美）只需几分钟即可编写完成，但它可能会帮助您创建更好的解决方案


HTML:

CSS:

这是我使用最小jQuery的版本：）

HTML:

jQuery：

var bgElem = $("#bg");
var inpElem = $("#inp");
bgElem.height(inpElem.outerHeight());

inpElem.on("keyup", function() {

    var val = $.trim( $(this).val() );
    var fword = val.split(" ")[0];
    var width = $("<span/>", { text: fword, css: { display: 'none' }}).appendTo("body").width() - 4;
    bgElem.width(width);
});

var bgElem=$（“#bg”）；
var-inpElem=$（“#inp”）；
b元素高度（元素内、元素外）；
inpElem.on（“keyup”，function（））{
var val=$.trim（$（this.val（））；
var fword=val.split（“”[0]；
var width=$（“”，{text:fword，css:{display:'none'}}）；
b元素宽度（宽度）；
});

演示@
但只有蓝色和橙色对吗？@MohitBhasi是的。我使用CSS类来更改背景。我希望第一个单词是蓝色或橙色，其余的是白色。所以当用户输入hello和how时只有两种情况？不确定这是否可行。不过，您可以使用一些css技巧来模拟这种效果。有
：：第一个字母
和
：：第一行
伪元素，但没有
：：第一个单词
元素。也许未来的规范会引入它。第二个选项似乎有些过分，因为我只需要设置这一种颜色，而不需要其他所有的富文本编辑功能。第一个选项看起来不错，但我不确定如何计算“hello”或“how”文本的宽度。您可以将单词放在那里，而不进行解释。这看起来是一个不错的选项，但不幸的是，当您在屏幕上键入内容时，绿色高亮显示仍然存在，文本框向左滚动。（例如，如果键入“hello there how are you”）是否可以看到文本在JavaScript中滚动了多远？抱歉，我找不到计算方法。您可以尝试扩展文本框大小和/或限制用户可以键入的长度谢谢您的回答！这工作得很好，当文本滚动时，突出显示保持在原位！我已将你的答案标记为已接受答案。没问题。如果你有任何问题，请告诉我。谢谢你的帮助！不幸的是，您的答案与Trinh Hoang Nhu的答案存在相同的问题-如果您键入的文本太多，文本框会向右滚动，但会突出显示。
$(document).on('keydown keyup change', '.magic-input-container input', function (){

    if(($(this).val().length) && ($(this).val().split(' ').length)){

        $(this).closest('.magic-input-container').find('.first-word').html($(this).val().split(' ')[0]).show();
    }
    else{

        $(this).closest('.magic-input-container').find('.first-word').hide();
    }    
});


$(document).on('click', '.magic-input-container .first-word', function (){

    $(this).closest('.magic-input-container').find('input').focus();
});

body {
    padding: 10px;
}

.magic-input-container {
    width: 100%;
    height: auto;
    position: relative;
    float: left;
}

.magic-input-container .first-word {
    background: red;
    width: auto;
    height: 20px;
    line-height: 20px;
    box-shadow: none;
    margin: 6px 12px;
    padding: 0px 1px;
    border: 0px;
    top: 0px;
    position: absolute;
    border-radius: 0px;
    display: none;
    color: #FFF;
}

<div class="container">
    <span id="bg"></span>
    <input id="inp" type="text" name="txt" size="60" />
</div>

.container {
    position: relative;
}

.container span {
    background: green;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    opacity: 0.4
}
.container input {
    position: absolute;
    z-index: 1;
}

var bgElem = $("#bg");
var inpElem = $("#inp");
bgElem.height(inpElem.outerHeight());

inpElem.on("keyup", function() {

    var val = $.trim( $(this).val() );
    var fword = val.split(" ")[0];
    var width = $("<span/>", { text: fword, css: { display: 'none' }}).appendTo("body").width() - 4;
    bgElem.width(width);
});