CODEWITHSUNDEEP
javascriptjqueryhtml
Ashok kumar
Ashok kumar

Reputation: 542

Scroll Width always returning undefined

I am doing a bit of program in which whenever it detects an input change in the textbox it needs to do something. But it doesn't work for me. So i Change i started giving the value in console to verify it whenever it detects a change in input it always returns undefined. How can i get the size of the text a user has entered in pixels?

<!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>

Upvotes: 6

Views: 19926

Answers (3)

ahoo ahooo
ahoo ahooo

Reputation: 33

const element = $("#func");

// Get the scroll width using the DOM element
const scrollWidth = element[0].scrollWidth;

console.log(scrollWidth);

Upvotes: 1

ssc-hrep3
ssc-hrep3

Reputation: 16069

You have two bugs in your code. First, you select the element func without a hash. If you select an id in jQuery, you are required to use a # in front of the id name (see reference). So, you need to select it like this: $('#func').

Second, you need the DOM element of $('#func') and not its jQuery wrapper to access the property scrollWidth. You can do that by using $('#func')[0].scrollWidth or $('#func').get().scrollWidth.

I would however recommend you to use the jQuery width function to get the width of the input field: $('#func').width().

Upvotes: 10

user3154108
user3154108

Reputation: 1294

scrollWidth is a DOM-Element attribute, not a jQuery attribute, $('#func').get().scrollWidth should be defined.

Upvotes: 2

Related Questions