Scroll Width always returning undefined

Question

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>

As other said scrollWidth has not wrapper in jQuery, So you can get it with $(selector).prop('scrollWidth'). — QMaster
– QMaster, Commented Apr 17, 2018 at 17:15

ssc-hrep3 · Accepted Answer · 2016-01-14 10:17:56Z

10

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().

edited Jan 14, 2016 at 10:17

answered Jan 14, 2016 at 10:12

ssc-hrep3

16.3k8 gold badges51 silver badges96 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Ashok kumar Over a year ago

I need to get the size of the pixels of the input no the whole inputbox size?

ssc-hrep3 Over a year ago

There is no such function available to get the width of the input field content. There are however some approches here: stackoverflow.com/questions/3392493/… and here: stackoverflow.com/questions/9328682/…

YTZ Over a year ago

I know this is somewhat old, but $('#func').get().scrollWidth will return "undefined" if you don't specify the index, so when getting the first element, using index 0, it should be $('#func').get(0).scrollWidth

user3154108 · Accepted Answer · 2016-01-14 10:09:42Z

2

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

answered Jan 14, 2016 at 10:09

user3154108

1,29413 silver badges24 bronze badges

Comments

ahoo ahooo · Accepted Answer · 2023-09-04 09:58:45Z

1

const element = $("#func");

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

console.log(scrollWidth);

edited Sep 4, 2023 at 9:58

answered Sep 4, 2023 at 9:58

ahoo ahooo

497 bronze badges

Collectives™ on Stack Overflow

Scroll Width always returning undefined

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related