Ufdjrw

What will the Frenchman say?

Does the Shadow Magic sorcerer's Eyes of the Dark feature work on all Darkness spells or just his/her own?

Why I don't get the wanted width of tcbox?

What is the tangent at a sharp point on a curve?

Which partition to make active?

Why are there no stars visible in cislunar space?

CLI: Get information Ubuntu releases

Isn't the word "experience" wrongly used in this context?

is this saw blade faulty?

Asserting that Atheism and Theism are both faith based positions

Determine voltage drop over 10G resistors with cheap multimeter

Is VPN a layer 3 concept?

How are passwords stolen from companies if they only store hashes?

Have the tides ever turned twice on any open problem?

Do people actually use the word "kaputt" in conversation?

What are the consequences of changing the number of hours in a day?

Can other pieces capture a threatening piece and prevent a checkmate?

Exit shell with shortcut (not typing exit) that closes session properly

Should a narrator ever describe things based on a characters view instead of fact?

Can "few" be used as a subject? If so, what is the rule?

Is there any common country to visit for uk and schengen visa?

Exposing a company lying about themselves in a tightly knit industry: Is my career at risk on the long run?

Hackerrank All Women's Codesprint 2019: Name the Product

When should a starting writer get his own webpage?

How do you listen / detect changes to an input value - when the input value is changed via javascript?

0

I've got an input with google autoComplete connected.

When the user moves up and down through the seachResultsthe value of the input is changed dynamically via JavaScript.

I'd like to capture the value that is in the input at any given time.

I've tried onChange and onInput but since no event is getting fired, and the value of the DOM Node is not getting set - there are no updates.

How do you detect changes to the input that are dynamically updated via JavaScript?

javascript html dom autocomplete

share|improve this question

asked Mar 6 at 23:32

zero_coolzero_cool

1,54911925

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  the value of the DOM Node is not getting set Wait, is the value being changed via Javascript, or not? Title implies it is, but that line there implies that it's not?
  
  – CertainPerformance
  Mar 6 at 23:33
  
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Make no mistake - the value of the input does change - I believe via Google - but the value attribute does not update unless an event is fired. For example, if onBlur or onClick is fired - the value attribute updates but when the results are changed via google autoComplete - it does not.
  
  – zero_cool
  Mar 6 at 23:34
  
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  The value attribute shouldn't change, though the value property should. How are you determining that it doesn't update, are you just listening for an event and not seeing one that triggers the listener? A live snippet (or a link) that illustrates the behavior would probably clear things up significantly
  
  – CertainPerformance
  Mar 6 at 23:35
  
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Potato? Potawto? What do you mean by property? The DOM Node of the input has a value attribute. When I'm watching the DOM using the browser inspector the value does not change unless an event is fired.
  
  – zero_cool
  Mar 6 at 23:37
  

  
  
  
  

add a comment | 

0

I've got an input with google autoComplete connected.

When the user moves up and down through the seachResultsthe value of the input is changed dynamically via JavaScript.

I'd like to capture the value that is in the input at any given time.

I've tried onChange and onInput but since no event is getting fired, and the value of the DOM Node is not getting set - there are no updates.

How do you detect changes to the input that are dynamically updated via JavaScript?

javascript html dom autocomplete

share|improve this question

asked Mar 6 at 23:32

zero_coolzero_cool

1,54911925

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  the value of the DOM Node is not getting set Wait, is the value being changed via Javascript, or not? Title implies it is, but that line there implies that it's not?
  
  – CertainPerformance
  Mar 6 at 23:33
  
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Make no mistake - the value of the input does change - I believe via Google - but the value attribute does not update unless an event is fired. For example, if onBlur or onClick is fired - the value attribute updates but when the results are changed via google autoComplete - it does not.
  
  – zero_cool
  Mar 6 at 23:34
  
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  The value attribute shouldn't change, though the value property should. How are you determining that it doesn't update, are you just listening for an event and not seeing one that triggers the listener? A live snippet (or a link) that illustrates the behavior would probably clear things up significantly
  
  – CertainPerformance
  Mar 6 at 23:35
  
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Potato? Potawto? What do you mean by property? The DOM Node of the input has a value attribute. When I'm watching the DOM using the browser inspector the value does not change unless an event is fired.
  
  – zero_cool
  Mar 6 at 23:37
  

  
  
  
  

add a comment | 

I've got an input with google autoComplete connected.

When the user moves up and down through the seachResultsthe value of the input is changed dynamically via JavaScript.

I'd like to capture the value that is in the input at any given time.

I've tried onChange and onInput but since no event is getting fired, and the value of the DOM Node is not getting set - there are no updates.

How do you detect changes to the input that are dynamically updated via JavaScript?

javascript html dom autocomplete

share|improve this question

asked Mar 6 at 23:32

zero_coolzero_cool

1,54911925

share|improve this question

asked Mar 6 at 23:32

zero_coolzero_cool

1,54911925

share|improve this question

asked Mar 6 at 23:32

zero_coolzero_cool

1,54911925

asked Mar 6 at 23:32

zero_coolzero_cool

1,54911925

asked Mar 6 at 23:32

zero_coolzero_cool

1,54911925

1 Answer
1

active

oldest

votes

1

The .value attribute will only change if the script-writer has called setAttribute('value' to set the new value, which is quite an odd thing to do. In almost all situations, I would expect the value to be set by assigning to the value property directly, eg:

input.value = 'foo';

Calling setAttribute will indeed show a change in the inspected DOM attribute, eg:

<input value="somevalue">

const input = document.querySelector('input');
input.setAttribute('value', 'foo');
console.log(input.outerHTML);

<input>

But just assigning to the .value property of the element will not result in such a change:

const input = document.querySelector('input');
input.value = 'foo';
console.log(input.outerHTML);

<input>

Assigning to the .value actually invokes a setter function on HTMLInputElement.prototype:

console.log(HTMLInputElement.prototype.hasOwnProperty('value'));

You can shadow this by putting a getter/setter for value directly on the element itself, with the setter invoking your own function, allowing you to listen for changes:

const get, set = Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, 'value');
const input = document.querySelector('input');
Object.defineProperty(input, 'value', 
 get() 
 return get.call(this);
 ,
 set(newVal) 
 console.log('New value assigned to input: ' + newVal);
 return set.call(this, newVal);
 
);


// example of autocomplete trying to change the input value:
input.value = 'foo';

<input>

share|improve this answer

answered Mar 6 at 23:44

CertainPerformanceCertainPerformance

93.9k165484

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  this looks promising. I will give this a shot :)
  
  – zero_cool
  Mar 6 at 23:48
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  @zero_cool Did it work for you?
  
  – CertainPerformance
  Mar 11 at 8:17
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Unfortunately, it did not :/
  
  – zero_cool
  Mar 12 at 20:46
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Can you post the code you're using so there's a Minimal, Complete, and Verifiable example to debug? As you can see from the live snippets (just press "Run code snippet"), the Javascript-initiated changes to the .value of the inputs look to be intercepted and observed as desired.
  
  – CertainPerformance
  Mar 12 at 20:48
  

  
  
  
  

add a comment | 

Your Answer

StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");

StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);

else
createEditor();

);

function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);



);

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);

Sign up using Google

Sign up using Facebook

Sign up using Email and Password

Post as a guest

Name

Email

Required, but never shown

StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55033836%2fhow-do-you-listen-detect-changes-to-an-input-value-when-the-input-value-is-c%23new-answer', 'question_page');

);

Post as a guest

Name

Email

Required, but never shown

1

The .value attribute will only change if the script-writer has called setAttribute('value' to set the new value, which is quite an odd thing to do. In almost all situations, I would expect the value to be set by assigning to the value property directly, eg:

input.value = 'foo';

Calling setAttribute will indeed show a change in the inspected DOM attribute, eg:

<input value="somevalue">

const input = document.querySelector('input');
input.setAttribute('value', 'foo');
console.log(input.outerHTML);

<input>

But just assigning to the .value property of the element will not result in such a change:

const input = document.querySelector('input');
input.value = 'foo';
console.log(input.outerHTML);

<input>

Assigning to the .value actually invokes a setter function on HTMLInputElement.prototype:

console.log(HTMLInputElement.prototype.hasOwnProperty('value'));

You can shadow this by putting a getter/setter for value directly on the element itself, with the setter invoking your own function, allowing you to listen for changes:

const get, set = Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, 'value');
const input = document.querySelector('input');
Object.defineProperty(input, 'value', 
 get() 
 return get.call(this);
 ,
 set(newVal) 
 console.log('New value assigned to input: ' + newVal);
 return set.call(this, newVal);
 
);


// example of autocomplete trying to change the input value:
input.value = 'foo';

<input>

share|improve this answer

answered Mar 6 at 23:44

CertainPerformanceCertainPerformance

93.9k165484

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  this looks promising. I will give this a shot :)
  
  – zero_cool
  Mar 6 at 23:48
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  @zero_cool Did it work for you?
  
  – CertainPerformance
  Mar 11 at 8:17
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Unfortunately, it did not :/
  
  – zero_cool
  Mar 12 at 20:46
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Can you post the code you're using so there's a Minimal, Complete, and Verifiable example to debug? As you can see from the live snippets (just press "Run code snippet"), the Javascript-initiated changes to the .value of the inputs look to be intercepted and observed as desired.
  
  – CertainPerformance
  Mar 12 at 20:48
  

  
  
  
  

add a comment | 

1

The .value attribute will only change if the script-writer has called setAttribute('value' to set the new value, which is quite an odd thing to do. In almost all situations, I would expect the value to be set by assigning to the value property directly, eg:

input.value = 'foo';

Calling setAttribute will indeed show a change in the inspected DOM attribute, eg:

<input value="somevalue">

const input = document.querySelector('input');
input.setAttribute('value', 'foo');
console.log(input.outerHTML);

<input>

But just assigning to the .value property of the element will not result in such a change:

const input = document.querySelector('input');
input.value = 'foo';
console.log(input.outerHTML);

<input>

Assigning to the .value actually invokes a setter function on HTMLInputElement.prototype:

console.log(HTMLInputElement.prototype.hasOwnProperty('value'));

You can shadow this by putting a getter/setter for value directly on the element itself, with the setter invoking your own function, allowing you to listen for changes:

const get, set = Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, 'value');
const input = document.querySelector('input');
Object.defineProperty(input, 'value', 
 get() 
 return get.call(this);
 ,
 set(newVal) 
 console.log('New value assigned to input: ' + newVal);
 return set.call(this, newVal);
 
);


// example of autocomplete trying to change the input value:
input.value = 'foo';

<input>

share|improve this answer

answered Mar 6 at 23:44

CertainPerformanceCertainPerformance

93.9k165484

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  this looks promising. I will give this a shot :)
  
  – zero_cool
  Mar 6 at 23:48
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  @zero_cool Did it work for you?
  
  – CertainPerformance
  Mar 11 at 8:17
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Unfortunately, it did not :/
  
  – zero_cool
  Mar 12 at 20:46
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Can you post the code you're using so there's a Minimal, Complete, and Verifiable example to debug? As you can see from the live snippets (just press "Run code snippet"), the Javascript-initiated changes to the .value of the inputs look to be intercepted and observed as desired.
  
  – CertainPerformance
  Mar 12 at 20:48
  

  
  
  
  

add a comment | 

The .value attribute will only change if the script-writer has called setAttribute('value' to set the new value, which is quite an odd thing to do. In almost all situations, I would expect the value to be set by assigning to the value property directly, eg:

input.value = 'foo';

Calling setAttribute will indeed show a change in the inspected DOM attribute, eg:

<input value="somevalue">

const input = document.querySelector('input');
input.setAttribute('value', 'foo');
console.log(input.outerHTML);

<input>

But just assigning to the .value property of the element will not result in such a change:

const input = document.querySelector('input');
input.value = 'foo';
console.log(input.outerHTML);

<input>

Assigning to the .value actually invokes a setter function on HTMLInputElement.prototype:

console.log(HTMLInputElement.prototype.hasOwnProperty('value'));

You can shadow this by putting a getter/setter for value directly on the element itself, with the setter invoking your own function, allowing you to listen for changes:

const get, set = Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, 'value');
const input = document.querySelector('input');
Object.defineProperty(input, 'value', 
 get() 
 return get.call(this);
 ,
 set(newVal) 
 console.log('New value assigned to input: ' + newVal);
 return set.call(this, newVal);
 
);


// example of autocomplete trying to change the input value:
input.value = 'foo';

<input>

share|improve this answer

answered Mar 6 at 23:44

CertainPerformanceCertainPerformance

93.9k165484

input.value = 'foo';

<input value="somevalue">

const input = document.querySelector('input');
input.setAttribute('value', 'foo');
console.log(input.outerHTML);

<input>

const input = document.querySelector('input');
input.value = 'foo';
console.log(input.outerHTML);

<input>

console.log(HTMLInputElement.prototype.hasOwnProperty('value'));

const get, set = Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, 'value');
const input = document.querySelector('input');
Object.defineProperty(input, 'value', 
 get() 
 return get.call(this);
 ,
 set(newVal) 
 console.log('New value assigned to input: ' + newVal);
 return set.call(this, newVal);
 
);


// example of autocomplete trying to change the input value:
input.value = 'foo';

<input>

const input = document.querySelector('input');
input.setAttribute('value', 'foo');
console.log(input.outerHTML);

<input>

const input = document.querySelector('input');
input.setAttribute('value', 'foo');
console.log(input.outerHTML);

<input>

const input = document.querySelector('input');
input.value = 'foo';
console.log(input.outerHTML);

<input>

const input = document.querySelector('input');
input.value = 'foo';
console.log(input.outerHTML);

<input>

console.log(HTMLInputElement.prototype.hasOwnProperty('value'));

console.log(HTMLInputElement.prototype.hasOwnProperty('value'));

const get, set = Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, 'value');
const input = document.querySelector('input');
Object.defineProperty(input, 'value', 
 get() 
 return get.call(this);
 ,
 set(newVal) 
 console.log('New value assigned to input: ' + newVal);
 return set.call(this, newVal);
 
);


// example of autocomplete trying to change the input value:
input.value = 'foo';

<input>

const get, set = Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, 'value');
const input = document.querySelector('input');
Object.defineProperty(input, 'value', 
 get() 
 return get.call(this);
 ,
 set(newVal) 
 console.log('New value assigned to input: ' + newVal);
 return set.call(this, newVal);
 
);


// example of autocomplete trying to change the input value:
input.value = 'foo';

<input>

share|improve this answer

answered Mar 6 at 23:44

CertainPerformanceCertainPerformance

93.9k165484

answered Mar 6 at 23:44

CertainPerformanceCertainPerformance

93.9k165484

answered Mar 6 at 23:44

CertainPerformanceCertainPerformance

93.9k165484