Prevent removing special character in textbox

Question

I want to prevent the user from deleting any "/" character in a textbox when pressing backspace or canc.

For example:

If the textbox value is 2014/09/, and the user presses backspace, the "/" character will not be removed.

How can I do it in the keyup or keydown evenets?

$("#textboxId").keyup(function(){

   // any idea

});

I would suggest you to use [MASKED INPUT PLUGIN](http://digitalbush.com/projects/masked-input-plugin/) I think thats what you require — Satpal, Sep 05 '14 at 10:26
Can you get the textbox value as a string, get the substring before the last /, and set the substring as the textbox's new value? — cameron, Sep 05 '14 at 10:34
@cameron yes , i can get it as string, can you show me sample? — SH.Developer, Sep 05 '14 at 10:35

Marco Bonelli · Accepted Answer · 2014-09-05T11:42:11.213

4

You have three situations:

The user presses backspace and deletes the char before the cursor
The user presses canc and deletes the char after the cursor
The user selects the text and presses backspace or canc and deletes the selected text

So you have to work around all these different situations.

This code will work:

$('#textareaId')[0].addEventListener("keydown", function(e) {
    var start = this.selectionStart,
        end = this.selectionEnd,
        value = this.value,
        key = e.keyCode;

    if (key == 8 && value[start-1] == '/') e.preventDefault();
    if (key == 46 && value[start] == '/') e.preventDefault();
    if ((key == 8 || key == 46) && value.substring(start, end).indexOf('/') != -1) e.preventDefault();

}, false);

WORKING EXAMPLE: http://jsfiddle.net/MeBeiM/7hdb3472/1

edited Sep 05 '14 at 11:42

answered Sep 05 '14 at 11:00

Marco Bonelli

63,369
21
118
128

@AminJafari I didn't select the jQuery library, sorry. It works fine now. – Marco Bonelli Sep 05 '14 at 11:30
It works almost fine. The problem is when I completely select the textbox and type something will remove / also, but it works fine on select+delete. – Mar 24 '15 at 11:03

score 0 · Answer 2 · answered Sep 05 '14 at 10:54

0

I have done it using the string operations

Check my fiddle here http://jsfiddle.net/7ek11cfs/21/

$('textarea').keydown(function(e) {
   textValue = $(this).val();
});

$('textarea').keyup(function(e) {
 if(textValue.charAt(textValue.length-1)=='/')
 {
   $('textarea').val(textValue);
 }
});

Hope this helps

answered Sep 05 '14 at 10:54

Khaleel

1,212
2
16
34

@MarcoBonelli which is expected as solution is works in this. how you claim it doesn't work ? – Khaleel Sep 05 '14 at 12:30

score 0 · Answer 3 · edited May 23 '17 at 10:28

here you go => DEMO

(function ($, undefined) {
    $.fn.getCursorPosition = function() {
        var el = $(this).get(0);
        var pos = 0;
        if('selectionStart' in el) {
            pos = el.selectionStart;
        } else if('selection' in document) {
            el.focus();
            var Sel = document.selection.createRange();
            var SelLength = document.selection.createRange().text.length;
            Sel.moveStart('character', -el.value.length);
            pos = Sel.text.length - SelLength;
        }
        return pos;
    }
})(jQuery);

$("#textboxId").keydown(function(e){
    var currentPos=$(this).getCursorPosition();
    var lastChar=$(this).val().substr((currentPos- $(this).val().length)- 1);
    if(e.which==8 && lastChar.match(/^\//g) ){
        e.preventDefault();
        return false;
    }
});

I took a bit help from THIS ANSWER for the function to identify the current position of cursor.

NOTE that in oppose to all the other answers and ideas found, this will ACTUALLY work like a mask and will not be removed even if the cursor is in the middle of the text!

You are making it a really mooooore complicated than it really is. — Marco Bonelli, Sep 05 '14 at 11:23
@MarcoBonelli yes, because I want it to work in all the situations with no exception — Amin Jafari, Sep 05 '14 at 11:24
If you put the caret at the beginning and use the CANC key it will delete all the text... — Marco Bonelli, Sep 05 '14 at 11:32

Prevent removing special character in textbox

3 Answers3