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