为什么 JS 字符限制会在 Safari 中被打破？答案

【问题标题】：Why would JS character limits break in Safari?为什么 JS 字符限制会在 Safari 中被打破？
【发布时间】：2018-10-11 12:18:37
【问题描述】：

我正在使用 JS 对输入进行一些字符限制（因为在 Shopify 上没有任何其他方法可以做到这一点），它在 FF 和 Chrome 中运行良好，但在 Safari 中我收到以下错误：

SyntaxError：字符串与预期的模式不匹配。

指下面form:内的定义

document.addEventListener('DOMContentLoaded', function () {
var shippingAddressEl = document.querySelector('.section--shipping-address')
if (shippingAddressEl) {
  var formValidation = {
    els: {
      el: shippingAddressEl,
      form: {
        firstname: shippingAddressEl.querySelector('input[name="checkout[shipping_address][first_name]"]:not([data-honeypot="true"]'),
        lastname: shippingAddressEl.querySelector('input[name="checkout[shipping_address][last_name]"]:not([data-honeypot="true"]'),
        company: shippingAddressEl.querySelector('input[name="checkout[shipping_address][company]"]:not([data-honeypot="true"]'),
        addressLine1: shippingAddressEl.querySelector('input[name="checkout[shipping_address][address1]"]:not([data-honeypot="true"]'),
        addressLine2: shippingAddressEl.querySelector('input[name="checkout[shipping_address][address2]"]:not([data-honeypot="true"]'),
        city: shippingAddressEl.querySelector('input[name="checkout[shipping_address][city]"]:not([data-honeypot="true"]'),
        postcode: shippingAddressEl.querySelector('input[name="checkout[shipping_address][zip]"]:not([data-honeypot="true"]'),
        phone: shippingAddressEl.querySelector('input[name="checkout[shipping_address][phone]"]:not([data-honeypot="true"]')
      }
    }
  }
});

如何解决这个错误？

【问题讨论】：

标签： javascript forms input character character-limit

【解决方案1】：

编辑：我找到了原因：

form 对象中的几乎每个值都缺少 )：

city: shippingAddressEl.querySelector('input[name="checkout[shipping_address][city]"]:not([data-honeypot="true"]'),

【讨论】：

不，创建 JSON 不需要引号。试试var json = { a: 1, b: 2 }。它有效
@JagdeepSingh 更新了我的帖子。再次感谢。
@JagdeepSingh 是一个 object - JSON 是一个字符串
天啊，它总是最简单的事情！完全错过了！谢谢！
@tom_mai78101 我的意思是to create a JSON 评论。 JSON 代表 JavaScript Object Notation，它是一个字符串类型，而 { a: 1, b: 2 } 是一个普通对象，不是 JSON。

【解决方案2】：

您在每一行都缺少右括号：

var formValidation = {
  els: {
    el: shippingAddressEl,
    form: {
      firstname: shippingAddressEl.querySelector('input[name="checkout[shipping_address][first_name]"]:not([data-honeypot="true"])'),
      lastname: shippingAddressEl.querySelector('input[name="checkout[shipping_address][last_name]"]:not([data-honeypot="true"])'),
      company: shippingAddressEl.querySelector('input[name="checkout[shipping_address][company]"]:not([data-honeypot="true"])'),
      addressLine1: shippingAddressEl.querySelector('input[name="checkout[shipping_address][address1]"]:not([data-honeypot="true"])'),
      addressLine2: shippingAddressEl.querySelector('input[name="checkout[shipping_address][address2]"]:not([data-honeypot="true"])'),
      city: shippingAddressEl.querySelector('input[name="checkout[shipping_address][city]"]:not([data-honeypot="true"])'),
      postcode: shippingAddressEl.querySelector('input[name="checkout[shipping_address][zip]"]:not([data-honeypot="true"])'),
      phone: shippingAddressEl.querySelector('input[name="checkout[shipping_address][phone]"]:not([data-honeypot="true"])')
    }
  }
}

这应该可行。

【讨论】：

天啊，它总是最简单的事情！完全错过了！谢谢！