jQuery 输入值未定义或白色文本

Question

这个问题大概已经问过上千遍了，不知道是不是SEO的原因，一直没有找到合适的解决办法。我在 Chrome.

中得到未定义或空白文本

$('input[type="text"]').on('input', (a, b) => {
    console.log(this.value);
});

这在控制台中一直返回未定义我也试过：

$('input[type="text"]').on('input', (a, b) => {
       console.log(b);
    });

$('input[type="text"]').on('input', (a, b) => {
       console.log($(this).val());
    });

$('input[type="text"]').on('input', (a, b) => {
       console.log(a.value);
    });

$('input[type="text"]').on('input', (a, b) => {
       console.log(b.value);
    });

如有任何想法，我们将不胜感激。

Answer 1

this 关键字不会像您期望的那样起作用，因为您使用的是 es6 箭头函数格式，什么会改变上下文，请使用 e.target 而不是它。

看看

$('input[type="text"]').on('input', (e) => {
  console.log(e.target.value);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" value="test">

Answer 2

这是因为您使用的箭头函数的范围与普通函数不同。

通常你可以用传统的函数表达式替换箭头函数并使用$(this)或者使用事件处理程序中的目标对象来获取输入的值

$('input[type="text"]').on('input', function(a, b) {
  console.log($(this).val());
});

$('input[type="text"]').on('input', (a, b) => {
  console.log(a.target.value);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type='text'>

jQuery 输入值未定义或白色文本

jQuery input value undefined or white text

javascript

jquery

dom-events

jquery-events