通过键入添加前缀/后缀

Question

I have an initially empty input (text) field. I would like that as soon as someone begins to type (onkeypress??), a prefix/suffix will be autom. added to the typed string. It should not be possible to delete the prefix/suffix from the final string and it should not be possible that the final string is just the prefix/suffix (in this case the text field should be emptied).

Can someone help me with a (plain) javascript, please?

Answer 1

It is definitely an anti-pattern to modify user input on keypress! There are many corner cases that make this annoying to use and hard to test... If the user types very fast, if content is actually copy-pasted, event being triggered by non typing keypress..

The "acceptable" solution IMHO , if you really want this, is to correlate user input with a readonly modified input (or any other element on the UI)!

<input id="uazz" type="text">single<br/><br/>

<input id="in" type="text">in<br/><br/>
<input id="out" type="text" readonly>out<br/><br/>

let userInput = document.getElementById('uazz')

let prefix='@'
let suffix='%'

function transformInput(el){
  let originalInput = el.target.value;
  if(originalInput!==''){
      let transformedInput = originalInput
    if(!transformedInput.match(new RegExp('^' + prefix))){
        transformedInput = prefix + transformedInput
    }
    if(!transformedInput.match(new RegExp(suffix + '$'))){
        transformedInput = transformedInput + suffix
    }
        if(transformedInput!==originalInput){
        el.target.value = transformedInput
    }
  }
}

userInput.onkeyup = transformInput

/* :] */

function transformInputOUT(el){
    let userInputOUT = document.getElementById('out')
  let originalInput = el.target.value;
  let transformedInput = originalInput

  if(transformedInput !== ''){
      transformedInput = prefix + transformedInput + suffix
  }
  userInputOUT.value = transformedInput

}


let userInputIN = document.getElementById('in')
userInputIN.onkeyup = transformInputOUT

See for yourself on this horrible implementation
https://jsfiddle.net/6f5zgtqo/5/