I have a small snippet that changes the textbox size based on its input I want to use jquery for all functions as much as possible but when I try with Its not invoking. Answer As mentioned in my comment, you were listening for the native input event instead of jQuery's event system, so when you used trigger to dispatch

Trigger for input is not invoking in jquery

I have a small snippet that changes the textbox size based on its input

I want to use jquery for all functions as much as possible but when I try with

.trigger("input")

JavaScript
​x
 
.trigger("input")
​

Its not invoking.

<html><head>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
    <style>
        #myInput {
  font: normal normal 400 normal 18px / normal Roboto, sans-serif;
  min-width: 40px;
}
    </style>

</head>
<body>
    <input value="" id="myInput" style="width: 10px;">
    
    
<script type="text/javascript">
function getTextWidth(el) {
  var canvas = getTextWidth.canvas || (getTextWidth.canvas = document.createElement("canvas"));
  var context = canvas.getContext("2d");

  var font = window.getComputedStyle(el, null).getPropertyValue('font');
  var text = el.value;

  context.font = font;
  var textMeasurement = context.measureText(text);

  return Math.min(350,textMeasurement.width);
}

var input = document.getElementById('myInput');

input.addEventListener('input', function(e) {
  var width = Math.floor(getTextWidth(e.target));
    console.log(width)

var widthInPx = (width + 10) + "px";
  e.target.style.width = widthInPx;
}, false);


$( document ).ready(function() {
document.getElementById('myInput').value = "Johnny Bravo"
//document.getElementById('myInput').dispatchEvent(new Event('input'));
$("#myInput").val("Hello World").trigger("input")

});

</script>


</body></html>

JavaScript
 
<html><head>
​
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
    <style>
        #myInput {
  font: normal normal 400 normal 18px / normal Roboto, sans-serif;
  min-width: 40px;
}
    </style>
​
</head>
<body>
    <input value="" id="myInput" style="width: 10px;">
    
    
<script type="text/javascript">
function getTextWidth(el) {
  var canvas = getTextWidth.canvas || (getTextWidth.canvas = document.createElement("canvas"));
  var context = canvas.getContext("2d");
​
  var font = window.getComputedStyle(el, null).getPropertyValue('font');
  var text = el.value;
​
  context.font = font;
  var textMeasurement = context.measureText(text);
​
  return Math.min(350,textMeasurement.width);
}
​
var input = document.getElementById('myInput');
​
input.addEventListener('input', function(e) {
  var width = Math.floor(getTextWidth(e.target));
    console.log(width)
​
var widthInPx = (width + 10) + "px";
  e.target.style.width = widthInPx;
}, false);
​
​
$( document ).ready(function() {
document.getElementById('myInput').value = "Johnny Bravo"
//document.getElementById('myInput').dispatchEvent(new Event('input'));
$("#myInput").val("Hello World").trigger("input")
​
});
​
</script>
​
​
</body></html>

Answer

As mentioned in my comment, you were listening for the native input event instead of jQuery’s event system, so when you used trigger to dispatch the event, there was a disconnect and your listener wasn’t firing. Basically you shouldn’t mix the event systems, native and jQuery.

I made the input handler reusable by defining a function handleInput which is now added to your input like .on('input', handleInput).

<html><head>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
    <style>
        #myInput {
  font: normal normal 400 normal 18px / normal Roboto, sans-serif;
  min-width: 40px;
}
    </style>

</head>
<body>
    <input value="" id="myInput" style="width: 10px;">
    
    
<script type="text/javascript">
function getTextWidth(el) {
  var canvas = getTextWidth.canvas || (getTextWidth.canvas = document.createElement("canvas"));
  var context = canvas.getContext("2d");

  var font = window.getComputedStyle(el, null).getPropertyValue('font');
  var text = el.value;

  context.font = font;
  var textMeasurement = context.measureText(text);

  return Math.min(350,textMeasurement.width);
}

var input = document.getElementById('myInput');
function handleInput(e) {
  console.log('input')
  var width = Math.floor(getTextWidth(e.target));
    console.log(width)

var widthInPx = (width + 10) + "px";
  e.target.style.width = widthInPx;
}
input.addEventListener('input', handleInput, false);


$( document ).ready(function() {
document.getElementById('myInput').value = "Johnny Bravo"
//document.getElementById('myInput').dispatchEvent(new Event('input'));

$('#myInput').val('Hello World').on('input', handleInput).trigger('input')


});

</script>


</body></html>

JavaScript
 
<html><head>
​
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
    <style>
        #myInput {
  font: normal normal 400 normal 18px / normal Roboto, sans-serif;
  min-width: 40px;
}
    </style>
​
</head>
<body>
    <input value="" id="myInput" style="width: 10px;">
    
    
<script type="text/javascript">
function getTextWidth(el) {
  var canvas = getTextWidth.canvas || (getTextWidth.canvas = document.createElement("canvas"));
  var context = canvas.getContext("2d");
​
  var font = window.getComputedStyle(el, null).getPropertyValue('font');
  var text = el.value;
​
  context.font = font;
  var textMeasurement = context.measureText(text);
​
  return Math.min(350,textMeasurement.width);
}
​
var input = document.getElementById('myInput');
function handleInput(e) {
  console.log('input')
  var width = Math.floor(getTextWidth(e.target));
    console.log(width)
​
var widthInPx = (width + 10) + "px";
  e.target.style.width = widthInPx;
}
input.addEventListener('input', handleInput, false);
​
​
$( document ).ready(function() {
document.getElementById('myInput').value = "Johnny Bravo"
//document.getElementById('myInput').dispatchEvent(new Event('input'));
​
$('#myInput').val('Hello World').on('input', handleInput).trigger('input')
​
​
});
​
</script>
​
​
</body></html>

Advertisement

Answer