Shadow Content has wrong value

user_10916043 0
Viewed 68

On my web page, every input field has a shadow content. As far as I know the shadow content is not explicitly inserted by me and I do not use it on the page otherwise.

My problem is that the values do not always match in the shadow content and input value;

so if i write the html

<input class="value-input" type="number" id="number" value="1" min="1" max="10">

in safari I can see a shadow content. and sometimes the shadow content has not the same value like the input value.

<input class="value-input" type="number" id="number" value="1" min="1" max="10">
  <div pseudo="-webkit-textfield-decoration-container">
    <div>
      <div contenteditable="plaintext-only">100</div>
    </div>
    <div pseudo="-webkit-inner-spin-button"></div>
  </div>
</input>

This wrong value cannot be caused by js, because I get the same problem if I disable js in the browser

Through this I get wrong values by read with js. In this case the console log gives me 100 instead of 1.

console.log(document.querySelector('#number').value);
<input class="value-input" type="number" id="number" data-minibasket-quantity-input="" value="1" min="1" max="10">

Does anyone have an idea how this number 100 comes into my shadow content, and why the shadow content doesn't have the same value like the input value?

I have found an input on the same page with this value (is the only one this value is found on the page)

<input data-range-min="" data-value="2000" onpaste="return false" type="number">
  <div id="text-field-container" pseudo="-webkit-textfield-decoration-container">
    <div id="editing-view-port">
      <div>2000</div>
    </div>
    <div pseudo="-webkit-inner-spin-button" id="spin">
    </div>
  </div>
</input>

It's possible the browser stores this value and set into next input number. The problem only occurs on browser back

html javascript
1 Answers

Just look on this example :

<input name="searchTxt" type="text" maxlength="512" id="searchTxt" class="searchField"/>

<button class="search">Search (open browser console to see result)</button>

function searchURL() {
   let txt = searchTxt.value;
   console.log(txt);
   // window.location = "http://www.myurl.com/search/" + txt; ...
}

document.querySelector('.search').addEventListener("click", ()=>searchURL());

https://jsfiddle.net/Lamik/py2h3f47/ this is exacly what you are looking for.

user_76525160
Related