CODEWITHSUNDEEP
javascriptjquery
user285594
user285594

Reputation:

Mask is not working?

enter image description here enter image description here

I have a inputbox with mask, but the inputs are not allowed by hardware keyboard, instead they have a touch-screen keyboard() function only that inserts the characters in that field.

But when keyboard() inserts the inputs in the input field it fails to generate the mask effects.

How to make the mask also work when keyboard() is used?

<script type="text/javascript" src="http://digitalbush.com/wp-content/uploads/2014/10/jquery.maskedinput.js"></script>
<script type="text/javascript">

function keyboard(input) {
  if (input==='BACKSPACE') {
    tvalue = '';
  } else if(input ==='QUOTE') {
    tvalue = tvalue + "'";
  } else if(input ==='SPACE') {
    tvalue = tvalue + " ";
  } else {
    tvalue = tvalue + input;
  }    
  $('#' + tinput).val(tvalue);
  console.log(">>> Keyboard: ", input);
}

$(document).ready(function(){
  $("#rrn").mask('99.99.99-999.99');

//  $(document).bind('contextmenu', function()  {
//    console.log('Touch screen, has no right click.');
//    return false;
//  });
//  
//  $(document).mousedown( function() {
//    return false; 
//  });

});
</script>


<div>
  <input type="text" name="rrn" id="rrn" style="position: absolute; left: 519px; top: 195px; width: 366px; height: 42px;border:none;" autocomplete="off"  onclick="inputselected(this, event);"/>    
  <img src="images/nl/keyboard.png"  border="0" usemap="#map_logo_new" id="spmain_new" />
  <map name="map_logo_new">
  <area shape="rect" coords="825,19,910,74" href="#" onclick="keyboard(0);">
  <area shape="rect" coords="22,83,107,138" href="#" onclick="keyboard('A');">  
   </map>    
 </div>

Upvotes: 1

Views: 1024

Answers (1)

John S
John S

Reputation: 21492

You are programmatically setting the value of the input, which does not cause any events to trigger. In order to force the mask to be applied, you need to trigger an event yourself (after calling .val()).

Try changing to this:

  $('#' + tinput).val(tvalue).trigger('input');

jsfiddle

This is for the jQuery Masked Input Plugin from Josh Bush at digitalbush.com.

At this time the latest version of this libary is v1.4. For an earlier version of the library you may have to try the 'click' event.

Upvotes: 1

Related Questions