Webflow中JavaScript代码中文本颜色的变化

Question

我正在学习JS，并使用它来修补网站。在下面的代码中，我希望更改占位符的颜色，它是在无效条目生成后出现的。

​

<script>
// when the DOM is ready
$(document).ready(function() {
  // make an array of invalid domains
  const invalidDomains = ['gmail.com', 'yahoo.com', 'hotmail.com', 'aol.com', 'hotmail.co.uk', 'hotmail.fr', 'msn.com', 'yahoo.fr', 'wanadoo.fr', 'orange.fr', 'comcast.net', 'yahoo.co.uk', 'yahoo.com.br', 'yahoo.co.in', 'live.com', 'rediffmail.com', 'free.fr', 'gmx.de', 'web.de', 'yandex.ru', 'ymail.com', 'libero.it', 'outlook.com', 'uol.com.br', 'bol.com.br', 'mail.ru', 'cox.net', 'hotmail.it', 'sbcglobal.net', 'sfr.fr', 'live.fr', 'verizon.net', 'live.co.uk', 'googlemail.com', 'yahoo.es', 'ig.com.br', 'live.nl', 'bigpond.com', 'terra.com.br', 'yahoo.it', 'neuf.fr', 'yahoo.de', 'alice.it', 'rocketmail.com', 'att.net', 'laposte.net', 'facebook.com', 'bellsouth.net', 'yahoo.in', 'hotmail.es', 'charter.net', 'yahoo.ca', 'yahoo.com.au', 'rambler.ru', 'hotmail.de', 'tiscali.it', 'shaw.ca', 'yahoo.co.jp', 'sky.com', 'earthlink.net', 'optonline.net', 'freenet.de', 't-online.de', 'aliceadsl.fr', 'virgilio.it', 'home.nl', 'qq.com', 'telenet.be', 'me.com', 'yahoo.com.ar', 'tiscali.co.uk', 'yahoo.com.mx', 'voila.fr', 'gmx.net', 'mail.com', 'planet.nl', 'tin.it', 'live.it', 'ntlworld.com', 'arcor.de', 'yahoo.co.id', 'frontiernet.net', 'hetnet.nl', 'live.com.au', 'yahoo.com.sg', 'zonnet.nl', 'club-internet.fr', 'juno.com', 'optusnet.com.au', 'blueyonder.co.uk', 'bluewin.ch', 'skynet.be', 'sympatico.ca', 'windstream.net', 'mac.com', 'centurytel.net', 'chello.nl', 'live.ca', 'aim.com', 'bigpond.net.au' ];

  // get the submit button
  const submitBtn = $('.submit-button-3');
  // on submit button click
  submitBtn.click(()=>{
    // get the email field
    const email = $('.text-field-2');
    // split email at '@' character to get domain
    const domainPart = email.val().split('@')[1]; 
  
    // if the domain exists in the invalidDomains array
    if(invalidDomains.indexOf(domainPart) !== -1) {
      // clear email field
      email.val('');
      // add a 'use business mail' placeholder
      email.attr('placeholder','Please enter a work email');
      // prevent form submission
      return false;
    }
    else{   // else if email is not invalid
      // submit form
      return true;
    }
  });
});
</script>

​

Answer 1

在无效域上尝试更改输入类，如下所示

email.addClass( "invalid" );

并为.invalid添加css，如下所示

::placeholder {
 color: black;
}
.text-field-2.invalid::placeholder {
 color: red;
}