Arama çubuğundaki her sözcüğün arka plan rengini değiştirin

Question

JQuery'deki her kelimeyi yazmaya çalışıyorum ve renkli bir arka plan veriyorum, bir çözüm buldum, ancak yalnızca html içeriği için çalışıyor, girişi renklendirmek istiyorum arama çubuğu için. Ve ne için bu bir examble ben jQuery('#search') için jQuery('*') değiştirmeye çalıştı ama işe yaramadı

HTML

some content 
<div>another content 
    <input id="search" type="text" value="dsfdsfdsf sdf dsfsdfsfs"> 
</div> 
<p> 
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse ac turpis 
</p> 
content in body 

jQuery

//the main point here is you need to replace only the contents of the text node, not all the html parts 

var colours = ['red', 'green', 'blue', 'cyan', 'magenta', 'yellow', 'gray']; 
var lastC; 

jQuery('*').contents().each(function() { 
    //not a text node or there is no content to replace 
    if (this.nodeType != 3 || !this.nodeValue.trim()) { 
     return; 
    } 

    //replace the value of the text node 
    $(this).replaceWith(this.nodeValue.replace(/\w+/g, function (part) { 
     var c = colours[Math.floor(Math.random() * colours.length)]; 
     while (c == lastC) { 
      var c = colours[Math.floor(Math.random() * colours.length)]; 
     } 
     lastC = c; 
     return '<span style="background-color: '+c+';">' + part.split("").join("") + '</span>' 
    })) 
}); 

bulundu.

Canlı örnek https://jsfiddle.net/7hs9mgLp/2/

Ne düzeltmek yapmam gerekir? Bu işlev bir yayılma elemanda englobe o kadar içeriği almak ve elemanın değil değeri çünkü Aslında

Answer 1

, olabilir değil metin girişi elemanı ile çalışır.

Ancak, kodunuzu backgroundinput öğeye uygulayarak kodunuzla çalışmasını sağlamak için bir düzeltme yaptım.

You can see it here

İşte JS kod:

girişteki her kelime renklendirmek için, bu biraz yanıltıcı olabileceğini ve bilmiyorum

//the main point here is you need to replace only the contents of the text node, not all the html parts 

var colours = ['red', 'green', 'blue', 'cyan', 'magenta', 'yellow', 'gray']; 
var lastC; 

jQuery('*').contents().each(function() { 
    //not a text node or there is no content to replace 
    // here is the part I've changed. I test what is the element we get 
    if ($(this).is("input")) { 
     color = colours[Math.floor(Math.random() * colours.length)]; 
     $(this).css('background-color',color); 
    } 
    else{ 
     if (this.nodeType != 3 || !this.nodeValue.trim()) { 
      return; 
     } 

     //replace the value of the text node 
     $(this).replaceWith(this.nodeValue.replace(/\w+/g, function (part) { 
      var c = colours[Math.floor(Math.random() * colours.length)]; 
      while (c == lastC) { 
       var c = colours[Math.floor(Math.random() * colours.length)]; 
      } 
      lastC = c; 
      return '<span style="background-color: '+c+';">' + part.split("").join("") + '</span>' 
     })); 
    } 
}); 

DÜZENLEME eğer orada bir " temiz "bunu yapmak için yol. Bunu yapmak için bir başka yolunu olamaz çünkü

neyse, burada benim önerim bunu yapmak için biraz HTML yapısını değiştirdik bu bölümünde

See this updated fiddle

için. Umarım yardımcı olur.

İşte güncellenen JS parçası:

if ($(this).is("input")) { 
    val = $(this).val().split(" "); 
    $(val).each(function(i,v) { 
    color = colours[Math.floor(Math.random() * colours.length)]; 
    $("label").append("<span class='absolute' style='background-color: "+color+"; '>"+v+"</span>"); 
    $('#search').css('position','relative'); 
    $(this).val(''); 
    $('label').css({'position' : 'absolute', 'left' : '2px', 'top' : '2px' }); 
    }); 
}