Javascript issue with Replace Character

Question

I am trying to replace special characters i.e <,>,& from input field on blur and keypress. And the code is working fine but the problem is, once user enter the desired string and then try to edit that string it will move the cursor to the end of the string, So the user isn't able to edit the string in between. How do I make this script more user friendly so that user can edit the existing string from anywhere.

HTML

<input type="text" class="prevent-special" name="name" value="HelloWorld" >

Script

$('.prevent-special').on('keypress blur',function(e){
    //console.log(e.keyCode);
    $(this).val($(this).val().replace(/\<|\>|\&+/g,''));
})

JS Example

Issue is with keypress. Why are you using it.? `blur` is enough — Nimish, Jul 18 '17 at 08:11
@Nimish is it? why? Are you the project sponsor specifying the requirements? — freedomn-m, Jul 18 '17 at 08:12

Ikbel · Accepted Answer · 2017-07-18T08:20:53.723

2

Try this:

$('.prevent-special').on('keyup blur',function(e){
    var start = this.selectionStart,
        end = this.selectionEnd

    $(this).val($(this).val().replace(/\<|\>|\&+/g,''))

    this.setSelectionRange(start, end)
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<input type="text" class="prevent-special" name="name" value="HelloWorld" >

edited Jul 18 '17 at 08:20

answered Jul 18 '17 at 08:14

Ikbel

7,721
3
34
45

Thank you so much, Its work as desired. – Bachcha Singh Jul 18 '17 at 08:18
2

You could also change `keypress` to `keyup` so the character is never shown in the input. With `keypress` the cleanup action doesn't get triggered until the next character is typed. – vi5ion Jul 18 '17 at 08:18
@vi5ion: Thank you. I think `keyup` fits better. – Ikbel Jul 18 '17 at 08:21
@vi5ion Thanks I will tack care – Bachcha Singh Jul 18 '17 at 08:22

Javascript issue with Replace Character

1 Answers1