Wie man Stil an Eingabe Text anwendet, wenn bestimmte Taste durch jquery gedrückt wird

Question

Ich habe ein div, in dem Benutzer E-Mail-ID getrennt durch Komma eingibt, wollte ich sie als background-color:green Farbe, wenn eine gültige E-Mail eingegeben wird und Benutzer Komma eingeben für nächste E-Mail-Adresse, bin ich fest daran Anwendung obwohl meine Funktion auf Presse Komma genannt wird, aber ich bin nicht in der Lage Stil in CSS durch jquery anwenden hier ist mein Code

$('.team-btn').click(function() { 
 
    $('.team-intro').replaceWith($(".team-invite").clone().show()); 
 

 
    $('#invite-emails').keydown(function(event) { 
 
    if (event.keyCode === 188) { 
 
     $val = $(this).val(); 
 
     $(this).val.apply("<span style='background-color:green'>"); 
 
    } 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="team-intro"> 
 
    <p>XXXX is a Free to use, Invite your team and get started today</p> 
 
    <button class="team-btn">Invite Now</button> 
 
</div> 
 

 
<div class="team-invite" style="display:none;"> 
 
    <p>Enter emails and we will invite your mates to join you.</p> 
 
    <input type="text" id='invite-emails' name='email' placeholder='enter emails here' size="30"> 
 
    <br> 
 
    <!--<div data-value="" id='style-email' style="padding-left: 12px; padding-right: 12px;">--> 
 
    <p id='subtext'>You can enter multiple emails with comma</p> 
 
</div>

Answer 1

Sie können nichts auf die Funktion val() "anwenden". Sie können auch keinen HTML-Code innerhalb des Werts input hinzufügen und ihn vom Renderer interpretieren lassen.

Um den Stil eines Elements festzulegen, fügen Sie am besten eine vordefinierte CSS-Klasse hinzu. Versuchen Sie folgendes:

$('.team-btn').click(function() { 
 
    $('.team-intro').replaceWith($(".team-invite").clone().show()); 
 

 
    $('#invite-emails').keydown(function(event) { 
 
    if (event.keyCode === 188) { 
 
     $(this).addClass('foo'); 
 
    } 
 
    }); 
 
});

.foo { background-color: #0C0; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="team-intro"> 
 
    <p>XXXX is a Free to use, Invite your team and get started today</p> 
 
    <button class="team-btn">Invite Now</button> 
 
</div> 
 

 
<div class="team-invite" style="display:none;"> 
 
    <p>Enter emails and we will invite your mates to join you.</p> 
 
    <input type="text" id='invite-emails' name='email' placeholder='enter emails here' size="30"> 
 
    <br> 
 
    <!--<div data-value="" id='style-email' style="padding-left: 12px; padding-right: 12px;">--> 
 
    <p id='subtext'>You can enter multiple emails with comma</p> 
 
</div>

Answer 2

CSS-Stil in JQuery anwenden Sie .css() Methode

Answer 3

Sie wahrscheinlich $(this).css({'background-color' : 'green'}); statt $(this).val.apply("<span style='background-color:green'>");

$('.team-btn').click(function(){ 
 
      $('.team-intro').replaceWith($(".team-invite").clone().show()); 
 
      
 
      $('#invite-emails').keydown(function (event) { 
 
    if (event.keyCode === 188) { 
 
     $val = $(this).val(); 
 
     $(this).css({'background-color' : 'green'}); 
 
    } else { 
 
     $(this).css({'background-color' : ''}); 
 
    } 
 
}); 
 
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="team-intro"> 
 
      <p>XXXX is a Free to use, Invite your team and get started today</p> 
 
      <button class="team-btn">Invite Now</button> 
 
     </div> 
 

 
     <div class="team-invite" style="display:none;"> 
 
      <p>Enter emails and we will invite your mates to join you.</p> 
 
      <input type="text" id='invite-emails' name='email' placeholder='enter emails here' size="30"> 
 
      <br> 
 
      <!--<div data-value="" id='style-email' style="padding-left: 12px; padding-right: 12px;">--> 
 
      <p id='subtext'>You can enter multiple emails with comma</p> 
 
     </div>

verwenden müssen, verwenden können