Blocking backspace and delete only for $ and

Question

I want to block backspace and delete button to remove $and . from the text box. For example: if my text box value is $10.00 i should able to delete only the digits not the $ and dot.

 <h:dataTable id="Dtable" var="item"
 value="#{bean.list}">
 <h:column>
 <h:inputText id="txt1" value="#{item.Amount1}" onkeypress=" return isMoney(this,event)"></h:inputText>
 </h:column>
 </h:dataTable>

This is how i'm allowing only digits,$ and dot. to be entered in the text box.

 function isMoney(thisObj,evt)
  {
     var charCode = (evt.which) ? evt.which : event.keyCode
     if(charCode == 46 || charCode == 36) // decimal pt or $
    return true;
     if (charCode > 31 && (charCode < 48 || charCode > 57))
        return false;
     return true;
  }

NOTE: No of rows may varry so I can't use id to get the particular textbox.

but value may varry like $10.236 $1000.2 if i put outside it wont be good and it wont work also — Sathesh S, Jun 06 '14 at 11:02

score 1 · Accepted Answer · answered Jun 09 '14 at 08:38

If your fields are dinamically added you have to use event delegation
Since I can't know the code that adds elements to your page in this document you will find a button that adds the text fields to the body tag
As you can see now the script even works with dynamically added elements
Given my "valuable time" don't forget to mark green in my reply ;) thanks.

<!DOCTYPE HTML>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
(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);

$(document).ready(function(){
    $('#new').click(function(){
        $('<input type="text" value="$500.45">').appendTo('body')
    })

    $('body').on('keydown','input',function(e){
         var keycode= (e.keyCode ? e.keyCode : e.which);
         if(keycode == 8){
            var position = $(this).getCursorPosition();
            var ca=$(this).val().slice(0,position).split('');
            var x=ca[ca.length-1];
            if(x==='$'||x==='.'){e.preventDefault()};            
        };
        if(keycode == 46){
            var position = $(this).getCursorPosition();
            var ca=$(this).val().slice(0,position+1).split('');
            var x=ca[ca.length-1];
            if(x==='$'||x==='.'){e.preventDefault()};            
            };
        })  
});     

</script>

</head>

<body>
<input id="a" name="" type="text" value="$500.45">
<input name="" type="button" value="newImput" id="new">

</body>
</html>

score 0 · Answer 2 · edited May 23 '17 at 12:27

Probably i found a solution to your problem.
For the script i use this little plugin for get caret position Get cursor position (in characters) within a text Input field
and a little of jQuery code.
This a working Fiddle.
As you can see in this example, you cannot delete the characters $ and . from text field using backspace or canc All code you need is

<script type="text/javascript">
(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);

$(document).ready(function(){
    $('#a').on('keydown',function(e){
         var keycode= (e.keyCode ? e.keyCode : e.which);

         if(keycode == 8){
            var position = $(this).getCursorPosition();
            var ca=$(this).val().slice(0,position).split('');
            var x=ca[ca.length-1];
            if(x==='$'||x==='.'){e.preventDefault()};            
        };

        if(keycode == 46){
            var position = $(this).getCursorPosition();
            var ca=$(this).val().slice(0,position+1).split('');
            var x=ca[ca.length-1];
            if(x==='$'||x==='.'){e.preventDefault()};            
            };
    });

});     

</script>

Hi Devima, thanks for your valuable time. Your code works fine but the problem is i'm dynamically creating the textboxes so it wont b having the id. How to make this work. i tried my level best. — Sathesh S, Jun 09 '14 at 07:27

Blocking backspace and delete only for $ and

2 Answers2