输入框输入内容时toString()不返回字符串值的问题排查

咱们先拆解下你的问题：你想要每次按下按键时，控制台实时输出输入框里的内容，但现在不管用不用toString()都拿不到有效内容，对吧？下面一步步给你讲清楚原因和解决办法：

为什么不用toString()时也拿不到文本值？ #

你提到参考了jQuery的text()方法，但这里有个关键误区：text()是用来获取/设置普通元素（比如<div>、<p>）的文本内容，而输入框（<input>、<textarea>这类表单元素）的内容是存在value属性里的，必须用val()方法来获取。这就是你一开始拿不到值的核心原因——用错了获取内容的方法，跟toString()完全没关系。

为什么toString()也无法输出内容？ #

当你用text()拿到空白内容后，再调用toString()，结果自然还是空白——毕竟你一开始获取的就是空值，转换字符串当然还是空。而且就算你用对了val()，输入框的val()返回的本身就是字符串类型，根本不需要额外调用toString()来转换，这步操作其实是多此一举的。

正确的实现代码 #

要实现按键实时输出，推荐用input事件（它能覆盖所有输入场景，包括粘贴、输入法联想输入，比keyup更靠谱），代码示例：

// 假设你的输入框选择器是#myInput
$('#myInput').on('input', function() {
  const inputValue = $(this).val();
  console.log(inputValue);
});

如果非要用keyup事件（注意：它在按下方向键等非输入按键时也会触发，且输入法输入时可能出现延迟），代码可以这么写：

$('#myInput').on('keyup', function() {
  console.log($(this).val());
});

测试一下：当你输入"stack"时，控制台会依次输出s、st、sta、stac、stack，完全符合你的需求。

总结一下 #

1. 表单输入框的内容要用val()获取，别用text()；
2. val()返回的已经是字符串，不需要额外调用toString()；
3. 用input事件比keyup更适合监听实时输入场景。

内容的提问来源于stack exchange，提问作者user5481714