CODEWITHSUNDEEP
javascriptjqueryregex
sealla
sealla

Reputation: 746

Regexp replace symbols in input field

I have an input field and a code with regexp that makes it to be able to only type digits

$('input').keyup(function () { 
    this.value = this.value.replace(/[^0-9]/g,'');
});

But when someone tries to edit a symbol at the middle of a field cursor places at the end of it. It makes editing hard because you have to delete all symbols after the symbol you want to edit.

A simple demonstration:

http://jsfiddle.net/NehmP/

Can someone help me to fix it?

Upvotes: 0

Views: 921

Answers (4)

sealla
sealla

Reputation: 746

With this code cursor won't be put at the end of the word even if the value is not valid. It is a combination of dystroy's solution and the code I have found in the internet. I think it still has many flaws and too long but maybe it still can help someone... Many thanks to you guys:)

function doGetCaretPosition (ctrl) {    
    var CaretPos = 0;
// IE Support
    if (document.selection) {   
        ctrl.focus ();
        var Sel = document.selection.createRange ();    
        Sel.moveStart ('character', -ctrl.value.length);    
        CaretPos = Sel.text.length;
    }
// Firefox support
    else if (ctrl.selectionStart || ctrl.selectionStart == '0'){
        CaretPos = ctrl.selectionStart;
    }
    return (CaretPos);  
}
function setCaretPosition(ctrl, pos){   
    if(ctrl.setSelectionRange){
        ctrl.focus();
        ctrl.setSelectionRange(pos,pos);
    }else if (ctrl.createTextRange) {
        var range = ctrl.createTextRange();
        range.collapse(true);
        range.moveEnd('character', pos);
        range.moveStart('character', pos);
        range.select();
    }
}
var remember;
$('input').keyup(function () { 
    remember = doGetCaretPosition(this);
    var v = this.value.replace(/[^0-9]/g,'');
    if (v!=this.value) {
        this.value = v; 
        setCaretPosition(this,remember - 1)
    };      
})

And jsfiddle

Upvotes: 0

gustavohenke
gustavohenke

Reputation: 41440

You should try some type of input masking plugins, for example, maskedInput.

$("input").mask("9999"); // People will only be able to type numbers of 4 chars long!
$("input").mask("9?999"); // People will only be able to type numbers from 1 to 4 chars long!

See more examples here.

Upvotes: 0

Billy Moon
Billy Moon

Reputation: 58551

You should not pull the rug from under someone's feet. What you are trying to do is beyond the scope of javascript, and should be handled by the browser/operating system.

If you present a text field to someone, they expect to be able to type anything in there (except in certain circumstances on mobile phones for example, where a specific keyboard can be defined).

It is a much much better approach to simply inform the user of the incorrect input, with a context sensitive message, and allow them to correct it themselves in a way they are familiar with.

If you try to interfere with the input method itself, it is likely to cause confusion, and frustration. Also, testing on a range of devices will yield untold quirks.

Also, validation should be performed on the server, as client side validation can be manipulated.

Validation on the client side should be for user convenience only.

Upvotes: -2

Denys Séguret
Denys Séguret

Reputation: 382170

You should replace only if the new string is different from the old one :

$('input').keyup(function () { 
   var v = this.value.replace(/[^0-9]/g,'');
   if (v!=this.value) this.value = v;
});

This way the cursor won't be put at the end as long as the value is valid.

Demonstration

Upvotes: 4

Related Questions