I would like to continue with numbers when using a placeholder in an input form.

Let's say my placeholder value is 5:

<input id="threshold" type="number" placeholder="5" value="">

I would like user to be able click on arrow up and value in a form would go to 6 (then 7, 8..). Instead, if user clicks on arrow up, values in the form would start on number 1 (then 2, 3...). Similar with arrow down - the value in the form would go to -1, instead of 4.

I can achieve desired behavior if I give up on placeholder and specify value, like this: <input id="threshold" type="number" value="5">

But let's say, I really want user to continue with numbers depending on placeholder value, because I like a gray look of input placeholder, is there an easy way to do this?

CodePudding user response：

Here some example i dont know if that what u searching for

<p>input with min max from 10 to 100 with start value 10</p>
<input type="number" value="10" min="10" max="100">
<br>
<p>input with min from 10 with start value 10</p>
<input type="number" value="10" min="10" >
<br>
<p>input with max 100 with start value 10</p>
<input type="number" value="10" max="100">

CodePudding user response：

In this demo I add two event listener to the #threshold element:

• For the keyup event, to keep track of when the user typed the value with the keyboard instead of using the arrow buttons, and discard the automatic behaviour based on placeholder in that case.
• For the input event, to catch whenever the user is sending input, both with the arrow keys and the keyboard.If such event occurs when the value is still empty, it will be overridden by a value that won't start by 1/-1 but from the placeholder 1/-1. The handler will discard the occurrence in case it happened pressing the keyboard instead of the mouse.

As far as I know, there's no other way to discern the exact event occurred between inserting value with keyboard or by clicking the arrows so the only way I found was keeping track of the keypress happening one moment before the input itself and try my best to discard some rare occurrencies when those conditions where not sufficient.

It works but I'm not perfectly sure how it fits in accessibility terms. But yet i can mention the scenarios in which I could test it as working:

• When the input is still empty, clicking the arrow up/down will increment and decrement starting from 5 as the zero (placeholder).
• When the input is still empty, typing the numbers inside with the keyboard won't trigger the override logic.
• When the input is filled with a valid number, clicking the arrow up/down will increment and decrement starting from the number currently filling the field.
• When the input is filled with a valid number, selecting the value and pressing backspace or del (or delete the value by any means), will reset the state of the control so that when pressing the arrows up/down will follow the expected logic where the zero becomes the placeholder again.

const o = document.querySelector('#threshold');
o.dataset.previous = '';

o.addEventListener('input', (event)=>{  
  const el = event.target;  
    
  if (el.dataset.prevent === true || el.dataset.previous !== ''){
    el.dataset.prevent = false;    
    return false;    
  }        
  
  if(el.value === '1')
    el.value = parseInt(el.placeholder)   1;
  else if(el.value === '-1')
    el.value = parseInt(el.placeholder) - 1;
  
  el.dataset.previous = el.value;    
});

o.addEventListener('keyup',(event)=>{
  const el = event.target;    
  if(el.value !== '')  
    el.dataset.prevent = true;    
  else{
    el.dataset.prevent = false;    
    el.dataset.previous = '';    
  }
})

<input id="threshold" type="number" placeholder="5">