How to prevent users typing/pasting in illegal characters onto input fields

I am using a simple key press event now and it just works fine when you don’t actually paste anything.
with key press event

app.html
<input type="text" value.bind="dirtyString" keypress.delegate="keypress($event)" />

app.ts
keypress(event) { return /([a-z 0-9]+)/gi.test(event.key); }

I also tried using value converter and it did not help either:
with value converter

app.html
<input type="text" value.bind="dirtyString | cleanString" />

clan-string.ts
export class CleanStringValueConverter {
toView(dirtyString){
dirtyString = dirtyString
.replace(/([|!/&*:;$%@#`’_"^<>()±.,\])+/g, “”)
.replace(/([^a-z 0-9]+)/gi, “”)
.trim();
return dirtyString;
}
}

Even this does not work when you paste unwanted text for the second time. It catches the first time.

Could anyone please suggest a way to handle paste event in aurelia? or a work around? many thanks in advance

2 Likes

work around?

export class App {
  message = "Hello World!";
  dirtyString = "";

  keypress(event) {
    return /([a-z 0-9]+)/gi.test(event.key);
  }
  paste(event) {
    event.target.blur();
    event.target.focus();
    return true;
  }
}

Note* I changed toView to fromView in your value converter

1 Like

Hi Brandon,

I tried your solution. I think something is wrong, may be there is a race condition between keypress and onpaste or the onpaste is not being triggered even though I just keep only that event on my input.
Feel free to edit this codesandbox: link

1 Like

Here ya go.

1 Like

I initially thought that the blur focus fixed a bug where if you paste large string very quickly selecting text it would never show special characters. I have found after more testing this still doesn’t fix that. Looking into this.

1 Like

Oh okay. My current requirement also doesn’t want me to dismiss users ability to paste, as few of our partners use that feature a lot. Thanks a lot and appreciate your time and help on this.

1 Like

Updated:
I feel this is what I was looking for and I feel I found the solution. I had to use the concept of value converter, keypress event and updateTrigger binding rule to make this work without any much hassle. Let me know if you find a better solution :slight_smile:

Thanks a lot for all your inputs so far :heart_eyes:

This is what I did:

app.html
(Edited to include updated template)

 <template>
  <require from="./clean-string"></require>

  <h3>Enter text with illegal charaters</h3>
  <input
    type="text"
    value.bind="dirtyString | cleanString & updateTrigger:'blur'"
    keypress.delegate="keypress($event)"
  />
  <p>${dirtyString}</p>
</template>

clean-string.ts

export class CleanStringValueConverter {
  fromView(val) {
    val = val          
      .replace(/([^a-z 0-9]+)/gi, "")
      .trim();
    return val;
  }

  toView(dirtyString) {
    dirtyString = dirtyString          
      .replace(/([^a-z 0-9]+)/gi, "")
      .trim();
    return dirtyString;
  }
}

app.ts

 export class Color {
      dirtyString = "";

      keypress(event) {
        return /([a-z 0-9]+)/gi.test(event.key);
        // return !/[|!/&*:;$%@#`'_"^<>()+-.,\\]/.test(event.key);
      }
    }

link to working code

1 Like

I still feel there is a problem.

You can in some sense “break” the field…even after blur left with invalid data.

. Looking into this cause.

1 Like

Ah… I never tested it once I got that working. So your case happen when you try to edit the second time. This is really making me go nuts. :unamused:

1 Like

I had to try and break it, and technically the object it is bound to still has the correct value. The input just isn’t getting adjusted.

2 Likes

I think I made it to work now. I just combined the keypress event as well… I feel that is done now. Let me know if you find any case where this would not work.

1 Like

Inputmask can filter an input. There is an aurelia-inputmask plugin for this.

3 Likes

Agree. We have decided to use less number of plugins and design our own while we develop so we could have our own rules as we see fit to our needs.

1 Like

Seems like I will have to take this route :slight_smile: