Solo estoy buscando una solución de JavaScript puro para el problema que estoy tratando de solucionar con el código y la lógica a continuación. Estoy atascado al no poder obtener el valor del campo de área de texto cuyo nombre contiene Mensaje de regalo como una subcadena de su nombre. ¿Podría por favor ayudar a arreglar esto?
El HTML es el siguiente:
<span class="bold_option_element"> <textarea name="properties[Enter Gift Message Below. NO EMOJIS PLEASE. Remember to sign your name! ]" class="ta_570739_262324" maxlength="1000"> </textarea> <textarea name="properties[Test Gift ]" class="ta_570739_262324" maxlength="1000"> </textarea> </span>JavaScript:
<script> {%- comment -%} This block of code checks if emojis are present in gift message, on keyup event Logic: 1. Get value of textarea field for gift message. 2. Get the textarea "bold_option_element" fields whose name has "GiftMessage" after stripping all blanks. 3. Return false if emojis are present. Refer: https://melvingeorge.me/blog/check-if-string-contain-emojis-javascript for emoji validation {%- endcomment -%} window.onkeyup = function(e) { // Get gift message string. giftMessage = "Hello 😃 😄"; let textAreaElements = document.getElementsByClassName('bold_option_element'); console.log(textAreaElements); const regexExp = /(\u00a9|\u00ae|[\u2000-\u3300]|\ud83c[\ud000-\udfff]|\ud83d[\ud000-\udfff]|\ud83e[\ud000-\udfff])/gi; if (regexExp.test(giftMessage)) { alert("No EMOJIs are allowed in the Gift Message. EMOJIs have been deleted in the Gift Messsage. Edit your Gift Message and 'Add to Cart'"); return false; } return true; }; </script>Enlace a jsfiddle: https://jsfiddle.net/pramodraam/vhqyj15m/6/
Mueva su selector fuera del controlador de keyup . Use addEventListener en lugar de onkeyup
El selector para sus áreas de texto con Gift Message en el atributo de name es:
".bold_option_element > textarea[name*='Gift Message']"
Lo usé en .querySelectorAll() como verá a continuación.
Finalmente, dado que esto es asíncrono, devolver un valor de un detector de eventos es un noop. Deberá usar ese valor booleano dentro del propio controlador, como se muestra a continuación.
El código está comentado.
// Get only the textareas with "Gift Message" in name attribute let textAreaElements = document.querySelectorAll(".bold_option_element > textarea[name*='Gift Message']"); // Add event listener to each textarea with "Gift Message" in name attribute textAreaElements.forEach(element => { element.addEventListener('keyup', checkForEmoji); }); // keyup event handler to check for emoji function checkForEmoji(e) { // Stores result of async Operation let result = true; const regexExp = /(\u00a9|\u00ae|[\u2000-\u3300]|\ud83c[\ud000-\udfff]|\ud83d[\ud000-\udfff]|\ud83e[\ud000-\udfff])/gi; if (regexExp.test(e.target.value)) { alert("No EMOJIs are allowed in the Gift Message. EMOJIs have been deleted in the Gift Messsage. Edit your Gift Message and 'Add to Cart'"); // EDIT: Added code to remove emoji e.target.value = e.target.value.replaceAll(regexExp, ''); result = false; } // Do something with result here console.log(result); }; <span class="bold_option_element"> <textarea name="properties[Enter Gift Message Below. NO EMOJIS PLEASE. Remember to sign your name! ]" class="ta_570739_262324" maxlength="1000"></textarea> <textarea name="properties[Test Gift ]" class="ta_570739_262324" maxlength="1000"></textarea> </span>