javascript - 为什么在 Firefox 中显示 OK 但在 Chrome 和 Safari 中显示的变量显示 NaN?
问题描述
我有一个 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 = " " + numCharsLeft + " characters remaining.";
}
所以,在上面的代码中,我有两个 console.log 行:
在 Firefox 中,它作为一个记录项 = "number" 返回,因为 if 语句不评估为 true
在 Safari 中,它返回两个连续记录的项目 =“数字”,然后是“NaN”,因为......我希望我知道!我尝试了一个 parseInt(numChars) 步骤以防万一,但没有任何改变。
有趣的是,在 textarea 元素上运行的相同代码在 Firefox、Chrome 和 Safari 中运行良好。
帮助非常感谢的人。
解决方案
对于跨浏览器解决方案,请使用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>
推荐阅读
- json - 如何在 JSON 文件上运行的 GraphQL 上应用过滤器?
- laravel - 批量更新在 pgsql 数据库 laravel 中不起作用
- python - 离线模式linux下pip安装要求
- android - 是否不仅可以在 Firebase Analytics 中查看过去 30 分钟内的事件?
- r - 数据帧的每 n 行和 n 列的总和
- apache-spark - 没有活动时杀死火花流作业
- angular - WebPack:无效的配置对象。Webpack 已使用与 API 模式不匹配的配置对象进行初始化
- visual-c++ - OnKillFocus 被调用了两次
- python-3.x - 通过 Regex 和 df.str.contains 在单行数据框中查找不同的电子邮件 ID
- javascript - 如何在 mocha / sinon 中测试条件表达式