滚动宽度总是返回未定义答案

【问题标题】：Scroll Width always returning undefined滚动宽度总是返回未定义
【发布时间】：2016-04-19 14:29:50
【问题描述】：

我正在做一个程序，当它检测到 文本框 中的输入更改时，它需要做一些事情。但这对我不起作用。所以我改变我开始在控制台中给出值来验证它，每当它检测到输入发生变化时，它总是返回undefined。如何获取用户输入的文本大小（以像素为单位）？

<!doctype html>
<html>
<head>
<style>
    input[type=text] {
        height: 20px;
        width: 100px;
    }
</style>
<script src="jquery.js"></script>
</head>
<body>
    <input type="text" id="func"></input>
</body>
<script>
    $("#func").change(function () {
      console.log($("func").scrollWidth);
    });
</script>
</html>

【问题讨论】：

正如其他所说的滚动宽度在jQuery中没有包装，所以你可以用$（selector）.prop（'scrollWidth'）来获得它。

标签： javascript jquery html

【解决方案1】：

您的代码中有两个错误。首先，选择不带散列的元素func。如果在 jQuery 中选择 id，则需要在 id 名称前使用#（参见reference）。所以，你需要像这样选择它：$('#func')。

其次，您需要$('#func') 的DOM 元素而不是它的jQuery 包装器来访问属性scrollWidth。您可以使用$('#func')[0].scrollWidth 或$('#func').get().scrollWidth 来做到这一点。

不过，我建议您使用jQuery width function 来获取输入字段的宽度：$('#func').width()。

【讨论】：

我需要获取输入像素的大小而不是整个输入框的大小？
没有这样的函数可以获取输入字段内容的宽度。然而，这里有一些方法：stackoverflow.com/questions/3392493/… 和这里：stackoverflow.com/questions/9328682/…
我知道这有点老了，但是$('#func').get().scrollWidth如果你不指定索引会返回“未定义”，所以在获取第一个元素时，使用索引0，它应该是$('#func').get(0).scrollWidth

【解决方案2】：

scrollWidth 是 DOM-Element 属性，不是 jQuery 属性，应该定义 $('#func').get().scrollWidth。

【讨论】：