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

Help Requests
1

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
2

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
4

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
5

Here ya go.

1 Like
6

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
7

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
8

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
9

I still feel there is a problem.

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

image
image.png1546×392 37.8 KB
. Looking into this cause.

1 Like
10

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
11

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
12

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
13

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

3 Likes
14

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
15

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

1 Like