Home > Blockchain >  How to let textbox only english can be input like type="password"?
How to let textbox only english can be input like type="password"?

Time:03-01

For example , I have three input mode (Chinese , Japanese , English) When I input at the type = "password" , only English can be used and I can't change the input mode. Now I want my textbox like this but not use type = "password",only english mode can be used , how can I do it ?

CodePudding user response:

If I understand correctly something like this should work

in your HTML

<textarea name="textarea" rows="10" cols="50">Write something here</textarea>

in Javascript

let text = document.querySelector('textarea');

const pattern = /^[a-zA-Z0-9()*_\-!#$%^&*,."\'\][] $/;

text.addEventListener('keyup',()=>{

  if(!pattern.test(text.value)) {
    alert('please use only latin letters')
  }

})```

CodePudding user response:

it is a component that you use everywhere

const MultiLangualInput= ({lan}) => {
    const EnglishMode = (event) => {
        let flag = false;
        var cahrcode = event.charCode;
        flag = (cahrcode == 32) ||
        (48 <= cahrcode && cahrcode <= 57) ||
        (65 <= cahrcode && cahrcode <= 90) ||
        (97 <= cahrcode && cahrcode <= 122);
        if (!flag)
            event.preventDefault();
    }
    const otherLanguage = (event) => {
        console.log(event.charCode)
        let flag = false;
        var cahrcode = event.charCode;
        flag = (cahrcode == 32) ||
        (48 <= cahrcode && cahrcode <= 57) ||
        (65 <= cahrcode && cahrcode <= 90) ||
        (1570 <= cahrcode && cahrcode <= 1594);
        if (!flag)
            event.preventDefault();
    }
    return (
        <Input onKeyPress={lan==='en'?EnglishMode:otherLanguage}>

        </Input>
    );
};

export default MultiLangualInput;

Like this:

const App = () => {

  return (
    <MultiLangualInput lan='en'>
        
    </MultiLangualInput>
  );
};

CodePudding user response:

If you want to prevent type chinese or japanese, simply an input:password will work.

<input type='password'>

Example for me when typing on input:password:

enter image description here

  • Related