Capturing a value of a Key Press

Capturing the value of  keyboard each keys can done using Javascript. Here we can implement the Key Press event in the input box. we can find the value using the following function.

<input type=”text” name=”keyVal” id=”keyVal” keypress=”keyDown(event)” />

function keyDown(e)
{
 dKey=(bw.ns)?e.which:event.keyCode;
// ie not case sensitive ?
dLet=String.fromCharCode(dKey);
dValues=”dKey=” + dKey+” dLet=” + dLet; alert(dValues);
}

The above function get invoked on each key press on the input box on the browser.

 

Advertisements

New Page in a New Window

In order to always open a new page in a new window you can employ

window.open function of JavaScript:

 window.open(URL, UNIQUE_TITLE, WINDOW_FEATURES) 

window.open(URL, UNIQUE_TITLE, WINDOW_FEATURES)


Note:

If you have a number of links that use this JavaScript snippet and want to open each of them in a separate window remember to set UNIQUE_TITLE to a unique string for each of them. If those strings are the same, the new window will be created only once and it will be reused every time you click such link.

javascript Clone

Using  javascript can make html clone on run time. Here we will see how to fomr a clone in the <table>’s  attributes <tr> and <td>values.

While making clone on the table attribute, here some html tag also present for the neatful presentation.

Create a table with id=”mainTbl”  as seen below with the simple html elements,

<table width=”100″ border=”0″ cellspacing=”0″ cellpadding=”2″ id=”mainTbl”>
             <tr>
               <td><select name=”reminder”>
                            <option value=”email” selected>Email</option>
                           </select> 
            </td>
                  <td>
                    <img src=”images/add.png” onclick=”insertRow();” /></td>
             </tr>
           </table>

Here onlick Add images as seen in the code we are calling insertRow() function to create clone as ,

function insertRow(){
    var tbl = document.getElementById(‘mainTbl’);   
     var lastRow = tbl.rows.length ;
    // if there’s no header row in the table, then iteration = lastRow + 1   
   var tr =document.createElement(“tr”);
   var td1 =document.createElement(“td”);
   var td2 = document.createElement(“td”);
   var td3 = document.createElement(“td”);

   td1.innerHTML = ‘<select name=”reminder”><option value=”email” selected>Email</option><option value=”sms”>SMS</option><option value=”alert”>Pop-Up</option></select>’;
   td2.innerHTML = ‘<input name=”min_value” type=”text” />’;
   td3.innerHTML = ‘<img src=”images/1244107465_time_delete.png” onclick=”removeRow();” />’;
   tr.appendChild(td1);
   tr.appendChild(td2);
   tr.appendChild(td3);   
 
   document.getElementById(“mainTbl”).getElementsByTagName(“tbody”)[0].appendChild(tr);
  }

Here createElement() creates the clone of <tr> and <td>. All the table elements HTML contents are get added using the appendChild() function as seen above.

By Runtime clone creation, we are creating delete event also for deleting the created clones using the removeRow(). This function will fire on click of  delete icon.

Restricting the input field with maxlength

Restricting the input field value with maxlength specified using the below javascript here,

function textLimit(field, maxlen)
  {
  if (field.value.length > maxlen + 1)
  alert(‘your input has been truncated!’);
  if (field.value.length > maxlen)
  field.value = field.value.substring(0, maxlen);
  }

This function is called on the input text onkeyup events, like below

<INPUT TYPE=”text” NAME=”dd” onkeyup=”textLimit(dd,10)”>

 

Simple JavaScript ‘Frame Busting’ Code

Here is a quick JavaScript  code that you can use if you want to make sure that no one should be able to show your website in an IFrame.

<script type=”text/javascript”>
if (top !=self) {
   top.location=self.location;
}
</script>

Just put this code in head section of your html page, and it will ensure that your page always get’s displayed outside the frames.

Multi-line JavaScript

In a case of, “I didn’t know you could do that,” I discovered via some random blog post I’ve now lost track of, that you can do multi-line JavaScript by escaping the line breaks.

var a = ‘You can start here \
and continue here \
and then finish it up here.’;

The backslash on each line allows you to keep going. It’s a little bit cleaner than opening and closing quotes and a concatenation operator on each line.

And now’s your chance to say, “I can’t believe you didn’t know that.”

Javascript Cheat Sheet

Here are the some of  cheat may helpful on list of Keywords available in javascript and also the cheat sheet.

Javascript Booklet

Javascript Cheat Sheet

Password Reconfirmation

Secure password validation is very important when creating a user system. Imagine if users could have insecure passwords without a character limit. Many user’s would have extremely insecure password and this is why we need password validation.

 

The code bellow is quite easy to follow. Make sure you read the comments if you get lost.

function validate_pwd(){
    password = document.getElementById(“pass_new”).value;
    confirmPassword = document.getElementById(“repass_new”).value;
    errors.innerHTML = “<ul>”;
   var error = 0
    if (password.length < ‘8’ ) {
        errors.innerHTML = errors.innerHTML + “<li> Passwords must be at least 8 characters long”;
        error = 1;
    }
    if(!(password == confirmPassword)){
        errors.innerHTML = errors.innerHTML + “<li> Passwords is not match</li>”;
 error = 1;
 }
    if (!password.match(/[a-z]/)) {
        errors.innerHTML = errors.innerHTML + “<li> Passwords must contain one lowercase letter</li>”;
        error = 1;
    }
    if (password.match(/[A-Z]/)) {
        errors.innerHTML = errors.innerHTML + “<li> Passwords must not contain one uppercase letter</li>”;
        error = 1;
    }
    if (!password.match(/[1-9]/)) {
        errors.innerHTML = errors.innerHTML + “<li> Passwords must contain one number </li>”;
 error = 1;
    }
    // If error is equal to one there must be an error
    if(error == 1){
        // Finish of the list for proper html
  document.getElementById(‘errors’).style.visibility=”visible”;
  document.getElementById(‘errors’).style.display=”block”;
        errors.innerHTML = errors.innerHTML + “</ul>”;
        // Do not allow submit the form as we have had an error
 return false;
    // IF error is not equal to 1 then there was no errors
     } else {
  errors.innerHTML =”;
 // Allow the submit to take place
 return true;
    }
}
<div id=”errors”> </div>

To get this validation to work all you need to do is add onSubmit="return validate()" into your form tag. Add this code to where you want your errors to be displayed

Script to Disable Mouse Right Click

Following is the script to disable mouse right click to copy the text while browsing the sites,

<script language=JavaScript>
<!–

//Disable right click script III- By Renigade (renigade@mediaone.net)
//For full source code, visit http://www.dynamicdrive.com

var message=””;
///////////////////////////////////
function clickIE() {if (document.all) {(message);return false;}}
function clickNS(e) {if
(document.layers||(document.getElementById&&!document.all)) {
if (e.which==2||e.which==3) {(message);return false;}}}
if (document.layers)
{document.captureEvents(Event.MOUSEDOWN);document.onmousedown=clickNS;}
else{document.onmouseup=clickNS;document.oncontextmenu=clickIE;}

document.oncontextmenu=new Function(“return false”)
// –>
</script>

Add this script in every web page and invoke this script in the body of the page as seen like below type,

<body id=”home” onselectstart=”return false;” style=”-moz-user-select: none;”>