Implement an Input With a Mask

implementation of react-input-mask

according to "Docs"

Usage notes:

Calls onChange prop after updating its internal value. First argument is the original event, the second is the masked value.

The onChange event got a second argument with the masked value:


export default function App() {
  const [input, setInput] = useState();
  const [numbDays, setNumbDays] = useState(0);

  const numberOfDays = 7;

  const maskInput = (e, masked) => {
    setInput(masked);
    setNumbDays(masked / numberOfDays);
  }

  return (
    <div className="App">
      <CurrencyInput name="myInput" onChange={maskInput} value={input} required />
      <h1>input / {numberOfDays} = {numbDays}</h1>
    </div>
  );
}

How do I implement an input mask with prototype?

You could try MaskedInput hosted at Github and see if that does what you need. I needed input masks a while back, so In lack of alternatives I ported digitalBush Masked Input Plugin for jQuery to Prototype.

Easiest way to mask characters in HTML(5) text input

Look up the new HTML5 Input Types. These instruct browsers to perform client-side filtering of data, but the implementation is incomplete across different browsers. The pattern attribute will do regex-style filtering, but, again, browsers don't fully (or at all) support it.

However, these won't block the input itself, it will simply prevent submitting the form with the invalid data. You'll still need to trap the onkeydown event to block key input before it displays on the screen.

ShowMaskOnFocus not working for input-mask in angular

Here i use https://github.com/ngneat/input-mask library.

*.html

<input maxlength="5" placeholder="HH:MM" [inputMask]="time" />

*.ts

time = createMask<Date>({
    alias:'datetime',
    inputFormat: 'HH:MM'
  });

Ref: https://stackblitz.com/edit/angular-ivy-sp6w7d?file=src%2Fapp%2Fapp.component.html

Javascript Input Text Masking without Plugin

You need two inputs

Two inputs should get the job done. One input will contain the masked text and the other will be a hidden input that contains the real data.

<input type="text" name="masknumber">
<input type="text" name="number" style="display:none;">

The way I approached the masking is to build a function for both masking and unmasking the content so everything stays uniform.

$("input[name='masknumber']").on("keyup change", function(){
        $("input[name='number']").val(destroyMask(this.value));
    this.value = createMask($("input[name='number']").val());
})

function createMask(string){
    return string.replace(/(\d{2})(\d{3})(\d{2})/,"$1-$2-$3");
}

function destroyMask(string){
    return string.replace(/\D/g,'').substring(0,8);
}