CODEWITHSUNDEEP
jquery
punit jain
punit jain

Reputation: 1

how to do masking in jquery?

i have one text box and one submit button. After filling the text box,when we click on submit button,that text box should be masked(we should not able to change anything in text box),not disabled.

 <html>
<head>
  <script src="http://code.jquery.com/jquery-1.4.2.min.js" type="text/javascript"></script>
  <script type="text/javascript">
      $(function(){
        $('button').click(function(){
            var n = $('#name');
            if (n.attr('readonly')=='readonly') {
                n.removeAttr('readonly');
            } else {
                n.attr('readonly','readonly');
            }
        });
    });
 </script>
</head>
<body>
       <input type="text" id="name" />
       <button> Lock </button>
</body>

i'm doing this by "readonly" attribute, but can we do it by "mask" attribute.

Upvotes: 0

Views: 429

Answers (2)

Suresh Kamrushi
Suresh Kamrushi

Reputation: 16086

You can install jquery plugin from http://plugins.jquery.com/maskedinput/ and try like this-

1) http://digitalbush.com/projects/masked-input-plugin/

2) http://igorescobar.github.io/jQuery-Mask-Plugin/

For example

jQuery(function($){
   $("#date").mask("99/99/9999");
   $("#phone").mask("(999) 999-9999");
   $("#tin").mask("99-9999999");
   $("#ssn").mask("999-99-9999");
});

Upvotes: 1

ostapische
ostapische

Reputation: 1592

You can use another input tag, see this link.
HTML: 

<input id="name" />
<input id="hiddenName" style="display: none;" disabled="disabled" />
<button type="button" onclick="disableInput();">Disable</button>

Javascript: 

function disableInput() {
    var name = document.getElementById("name");
    var hiddenName = document.getElementById("hiddenName");
    hiddenName.value = name.value;
    hiddenName.style.display = "inline";
    name.style.display = "none";
}

Upvotes: 0

Related Questions