遍历特定 class 下的 textarea 字段，以从名称以 Gift Message 作为子字符串的 textarea 字段中去除表情符号

Question

我只是在寻找一个纯粹的 JavaScript 解决方案来解决我试图用下面的代码和逻辑解决的问题。我一直无法获取名称包含礼品消息作为其名称子字符串的文本区域字段的值。你能帮忙解决这个问题吗？

HTML如下：

<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>

Link 到 jsfiddle：https://jsfiddle.net/pramodraam/vhqyj15m/6/

Answer 1

将您的选择器移到 keyup 处理程序之外。使用 addEventListener 而不是 onkeyup

name 属性中带有 Gift Message 的文本区域的选择器是：

".bold_option_element > textarea[name*='Gift Message']"

我在 .querySelectorAll() 中使用了它，如下所示。

最后，由于这是异步的，因此从事件侦听器返回值是空操作。您需要在处理程序本身中使用该布尔值，如下所示。

代码已注释。

// 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>

遍历特定 class 下的 textarea 字段，以从名称以 Gift Message 作为子字符串的 textarea 字段中去除表情符号

Iterate through textarea fields under a specific class to strip emojis from a textarea field whose name has Gift Message as substring

javascript

html

jquery

frontend

web-deployment