Restrict Special Characters in TextBox using JavaScript in asp.net

Hi friends, today i am going show you how to Restrict Special Characters in TextBox or in Textarea  using JavaScript in asp.net.

Screen 1

I have two method to do it in javascript.

First Method:

In this method you only want to add "RestrictHtmlCharacter-Tags.js" file in order to restrict special character in textbox.

Using this method you don't need to add anything to textbox. Only you have to do one thing only call that "RestrictHtmlCharacter-Tags.js" js file in your page and it will restrict all the textbox entering special character. For this you have to add jquery 1.7.2.min.js

Click here to download RestrictHtmlCharacter-Tags.js

If you have update panel on your page please add following initializing code to initialize the  "RestrictHtmlCharacter-Tags.js".

        //Restrict HTML Character
        $(document).ready(function() {
            try {
                RestrictHtmlCharacter();                Sys.WebForms.PageRequestManager.getInstance().add_endRequest(RestrictHtmlCharacter);
            }
            catch (err) {
            }
        }); 

 Add this following file in head tag:

<script src="Script/jquery-1.7.2.min.js" type="text/javascript"></script>

<script src="Script/RestrictHtmlCharacter-Tags.js" type="text/javascript"></script>

 Using this way you don't need too add anything in textbox only add this javascript file.

Second Method:

The second method to do the same is following:

The script works in such a way that the TextBox will accept only alphabets, numbers i.e. alphanumeric values with some allowed special keys, thus unless a special character key has been specified to be excluded it won’t be accepted.

HTML:

<div align="center" style="width: 100%;">
        <div style="width: 300px;">
            <fieldset>
                <legend>Restrict Special Character</legend>
                <br />
                Note: Special character <b>not</b> allowed.
                <br />
                <br />
                <asp:TextBox ID="txtSearch" runat="server" onkeypress="return IsCharacterRestrict(event);"
                    ondrop="return false;" onpaste="return false;" Style="font-size: 14px;
                    margin-top: 10px; height: 30px; width: 250px; color: #353535;" MaxLength="100"></asp:TextBox>
                <br />
                <br />
                <br />
            </fieldset>
        </div>
    </div>

Script:

<script type="text/javascript">
        var specialKeys = new Array();
        specialKeys.push(8);  //Backspace
        specialKeys.push(9);  //Tab
        specialKeys.push(46); //Delete
        specialKeys.push(36); //Home
        specialKeys.push(35); //End
        specialKeys.push(37); //Left
        specialKeys.push(39); //Right
        function IsCharacterRestrict(e) {
            var keyCode = e.keyCode == 0 ? e.charCode : e.keyCode;
            var ret = ((keyCode >= 48 && keyCode <= 57) || (keyCode >= 65 && keyCode <= 90) || (keyCode >= 97 && keyCode <= 122) || (specialKeys.indexOf(e.keyCode) != -1 && e.charCode != e.keyCode));
            return ret;
        }
    </script>
 

Download Link :

Download Complete Project

Enjoyed this post? Share and Leave a comment below, thanks! :)

Styled Checkboxes with pure CSS that work upto IE5 and cross browser

 

Styled Checkboxes with pure CSS that work upto IE5 and cross browser

Styled checkboxes with pure CSS

The idea is that using the ':before' pseudo-class allows us to define the checkbox style in pure CSS, using the 'content' attribute to define the check symbol used and the ':checked' pseudo-selector to switch it. ':before' has to be on the subsequent element so that we can select it properly (you can't define ':before' for <input> elements).

IE 8 doesn't support ':checked' so we switch a class on it using jQuery and IE 6 & 7 don't support ':before' so we add a <span> to do its job.

IE fallbacks currently don't work! Feel free to suggest fixes :-) 

Demo

 

 

CSS

<style type="text/css">
.ckbox
{
width: 25px;
height: 25px;
}
.custom-checkbox
{
position: relative;
display: inline-block;
}

.custom-checkbox > .box
{
position: relative;
display: block;
width: 25px;
height: 25px;
background-color: #E5E5E5;
padding: 0px;
margin: 0px;
}

.custom-checkbox > .box > .tick
{
position: absolute;
left: 4px;
top: 7px;
width: 14px;
height: 6px;
border-bottom: 4px solid #000;
border-left: 4px solid #000;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
transform: rotate(-45deg);
display: none;
}

.custom-checkbox > input:checked + .box > .tick
{
display: block;
}

.custom-checkbox > input
{
position: absolute;
outline: none;
left: 0;
top: 0;
padding: 0;
width: 25px;
height: 25px;
border: none;
margin: 0;
opacity: 0;
z-index: 1;
}

</style> 

Script

//Add jquery file

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js">
</script>

//Checkbox Check click call the function

<script type="text/javascript">
  GetSelectedValue();
    function GetSelectedValue() {
    var final = '';

    $('.ckbox:checked').each(function() {

                var values = $(this).val();
                final += values + ",";       
     });
     alert(final);
}
</script>

HTML

 
<body>
 <form action="" method="GET">
  <table style="background-color: #E5E5E5;">
   <tr>
    <td>
      <span class="custom-checkbox">
      <input onclick="GetSelectedValue();" id="fileItem" name="fileItem"   type="checkbox" class="ckbox" value="1" checked="checked" />
      <span class="box" ><span class="tick"></span></span>
      </span>
      <input id="fileId" name="fileId" type="hidden" value="" />
    </td>
    <td>
      <label for="fileItem" title="">Check</label>

       <div class="custom-checkbox">
          chkChecked
       </div>
   </td>
  </tr>
  <tr>
   <td>
     <span class="custom-checkbox">
     <input onclick="GetSelectedValue();" id="fileItem1" name="fileItem1" type="checkbox" class="ckbox" value="2" />
     <span class="box" ><span class="tick"></span></span>
     </span>
     <input id="fileId" name="fileId" type="hidden" value="" />
  </td>
  <td>
    <label for="fileItem1" title="">Check</label>

   <div class="custom-checkbox">
     chkChecked
    </div>
   </td>
  </tr>
 </table>
</body> 

Download Link

https://drive.google.com/file/d/0B7XVDU9gdC-lQnlUV2Fqc3BSYUU/edit?usp=sharing

 

How to detect IE browser and detect version in Javascript

Detect IE Browser in Javascript

This code detect the IE browser only.

Code: 

var isMSIE = /*@cc_on!@*/0;

if (isMSIE) 

{

   alert('ie brower');

}

else 

{

   alert('not ie browser’);

}

 

Detect IE Browser version in Javascript

This code detect the IE browser version.

Code: 

function getInternetExplorerVersion()

//Returns the version of Internet Explorer or a -1

//(indicating the use of another browser).

{

    var rv = -1; // Return value assumes failure.

    if (navigator.appName == 'Microsoft Internet Explorer') {

        var ua = navigator.userAgent;

        var re = new RegExp("MSIE ([0-9]{1,}[\.0-9]{0,})");

        if (re.exec(ua) != null)

            rv = parseFloat(RegExp.$1);

    }

    return rv;

}

function checkVersion() {

   

    var ver = getInternetExplorerVersion();

    if (ver > -1) {

        if (ver == 6.0) {
            alert('IE version 6.0');

            //Your code here..

        }

        else if (ver == 7.0) {
            alert('IE version 7.0');

            //Your code here..

        }
        else if (ver == 8.0) {
            alert('IE version 8.0');

            //Your code here..

        }

        else {

            //Your code here..

        }

    }

}