Imposta colore di sfondo della prima parola nella casella di testo?

Question

Ho un input da casella di testo nel mio HTML. So come impostare il colore di sfondo dell'intera cosa con i CSS (background-color) ma è possibile impostare solo il colore di sfondo della prima parola? Lo voglio in modo che se qualcuno digita, ad esempio "ciao", il colore di sfondo della parola "Ciao" diventa arancione, ma se digita "come stai", la parola "come" diventerà blu .

L'ho ottenuto per modellare l'intera casella di testo in this JSFiddle here con jQuery e CSS, ma è possibile impostare solo il colore di sfondo della prima parola?

Answer 1

Soluzione rapida (non perfetto) writen in pochi minuti, ma forse aiuterà a creare una migliore soluzione .

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

Credo non ci sia uno stile di formattazione per tale casella di testo, area di testo. Ma puoi fingere. Ho due idee:

1. Imposta il colore di sfondo dell'input di testo su trasparente, quindi crei uno sfondo colorato utilizzando span, div ecc. Imposta posizione o margine in modo che la casella di testo sia sullo sfondo.
2. scrittura o utilizzando un editor di testo formattato che rendono il testo utilizzando HTML

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

<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"/>

Answer 3

Questa è la mia versione con il minimo 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); 
}); 

Demo @Fiddle