Question

我的HTML中有一个文本框输入。我知道如何使用CSS（background-color）设置整个事物的背景颜色，但是是否可以仅设置第一个单词的背景颜色？我想要它，以便如果有人输入，例如，＆＃34;你好那里＆＃34;，这个词的背景颜色＆＃39;你好＆＃39;将变成橙色，但如果他们输入＆＃34;你是怎么回事，那么“＆＃39;怎么样？＆＃39;会变蓝。

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

Answer 1

快速解决方案（不完美）写在几分钟内，但也许它可以帮助您创建更好的解决方案。

http://jsfiddle.net/ea7qbdLx/8/

HTML：

<div class="magic-input-container">
    <div class="form-control first-word"></div>
    <input type="text" id="textbox" class="form-control" placeholder="Type here..."/>
</div>

JS：

$(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();
});

CSS：

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;
}

Answer 2

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

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

＆＃13;

$(document).ready(function() {
    $('input').keyup(function(){
        var str= $(this).val();
        var idx = str.indexOf(' ') != -1?str.indexOf(' '):str.length;
        $('span').text(str.substr(0, idx));
        $(this).css('margin-left',-$('span').width()-6);
    });    
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<span style="background-color:green; color:transparent">hello</span>
<input value="hello there" style="margin-left:-36px; background: transparent"/>

＆＃13;

Answer 3

这是我的最小jQuery版本：）

HTML：

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

CSS：

.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;
}

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);
});

演示@ Fiddle

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

3 个答案: