为什么在 Firefox 中显示 OK 但在 Chrome 和 Safari 中显示的变量显示 NaN？

Question

我有一个 id="meetingName" 和 maxlength="100" 的输入。 我添加了一个带有 Javascript 的侦听器，该侦听器运行 Javascript 函数来计算已键入的字符数，因此还有多少 100 个字符需要键入。 该代码在 (Mac) Firefox 中运行良好，但在 Chrome 或 Safari 中运行良好。在 Chrome 和 Safari 中，它显示 NaN。

如果我运行代码来获取输入的字符数：

    var numChars = document.getElementById('meetingName').textLength;

... 我做了一个 console.log(numChars) 步骤，它在 Safari 中显示为 NaN，但在 Firefox 中显示为 0（这是正确的，因为我还没有输入任何字符）。我已经尝试过使用和不使用 Number() 来告诉它充当数字，无论哪种方式都是一样的。

如果我问变量类型是什么

    var test1=typeof numChars

...我将其记录到控制台，它在 Firefox 和 Safari 中都正确显示为“数字”。

但是如果我然后立即在 numChars 上运行 isNAN()，它会说它不是 Safari 中的数字。

HTML

    <input type="text" id="meetingName" required maxlength="100">

JS

    // Set up a listener to count the number of characters in the Meeting Name input field
    var meetingName = document.getElementById('meetingName');
    meetingName.addEventListener("focus", meetingNameNumChars, false);
    meetingName.addEventListener("input", meetingNameNumChars, false);
    // Get max number of characters in the Meeting Name <input> field
    var maxCharsMn = Number(document.getElementById('meetingName').maxLength);
    function meetingNameNumChars() {
       var numChars = document.getElementById('meetingName').textLength;
       var test1=typeof numChars;
       console.log(test1);
       if (isNaN(numChars)) {
          console.log(numChars);
       }
       var numCharsLeft = maxCharsMn - numChars;
       document.getElementById('numCharsLeftMeetingName').innerHTML = "&nbsp;&nbsp;&nbsp;" + numCharsLeft + " characters remaining.";
    }

所以，在上面的代码中，我有两条 console.log 行：

• 在 Firefox 中，它作为一个记录项 = "number" 返回，因为 if 语句的计算结果不正确

• 在 Safari 中，它返回两个连续记录的项目 =“数字”，然后是“NaN”，因为......我希望我知道！我尝试了一个 parseInt(numChars) 步骤以防万一，但没有任何改变。

有趣的是，在 textarea 元素上运行的相同代码在 Firefox、Chrome 和 Safari 中运行良好。

帮助非常感谢的人。

Answer 1

对于跨浏览器解决方案，请使用value.length。看看下面的可行解决方案。

// Set up a listener to count the number of characters in the Meeting Name input field
var meetingName = document.getElementById('meetingName');
meetingName.addEventListener("focus", meetingNameNumChars, false);
meetingName.addEventListener("input", meetingNameNumChars, false);
// Get max number of characters in the Meeting Name <input> field
var maxCharsMn = Number(document.getElementById('meetingName').maxLength);

function meetingNameNumChars() {
  var numChars = document.getElementById('meetingName').value.length;
  var numCharsLeft = maxCharsMn - numChars;
  document.getElementById('numCharsLeftMeetingName').innerHTML = numCharsLeft + " characters remaining.";
}

<input type="text" id="meetingName" required maxlength="100">
<p id="numCharsLeftMeetingName"></p>