为什么一个变量在 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 中都正确显示为 'number'。

但是如果我然后立即运行 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 中，它作为一个记录项 =“数字”返回，因为 if 语句未评估为真
在 Safari 中，它返回两个连续的记录项目 =“number”，然后是“NaN”，因为......我希望我知道！为了以防万一，我尝试了一个 parseInt(numChars) 步骤，但没有任何改变。

有趣的是，文本区域元素上的相同代码运行在 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>

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

Why is a variable showing OK in Firefox but not Chrome & Safari, displays NaN?

javascript

safari

nan