Friday 23 September 2011

How to catch TAB key press with JavaScript in Firefox,Safari,Opare & IE

<html>
<head>
<script type="text/javascript">
var obj;
var TAB = 9;
function catchTAB(evt,elem)
{
  obj = elem;
  var keyCode;
  if ("which" in evt)
  {// NN4 & FF &amp; Opera
    keyCode=evt.which;
  } else if ("keyCode" in evt)
  {// Safari & IE4+
    keyCode=evt.keyCode;
  } else if ("keyCode" in window.event)
  {// IE4+
    keyCode=window.event.keyCode;
  } else if ("which" in window.event)
  {
    keyCode=evt.which;
  } else  {    alert("the browser don't support");  }


  if (keyCode == TAB)
  {
    obj.value = obj.value + "\t";
    alert("TAB was pressed");
    setTimeout("obj.focus()",1);// the focus is set back to the text input
  }
}
</script>
</head>
<body>
<input type="text" onkeydown="catchTAB(event,this);">
</body>
</html>

Thursday 15 September 2011

To Change FILE input button style


There is a Big Mess while changing style of FILE input button in HTML through CSS. below is a trick to do that. i had put File input button below a normal html button with opacity 0 so that File button hides beneath the normal button and on click of the normal button file input gets clicked. also adjust the Left:15px of file button to make it exact below the normal button.


<style>
#upload_button {    
     -moz-box-sizing: content-box;
    border-radius: 11px 11px 11px 11px;
    background-color: #F2F2F2;
    border-style: solid;
    border-width: 1px;
    cursor: pointer;
    font-size: 11px !important;
    line-height: 10px;    
    text-decoration: none;
    padding: 0px 14px;
    text-align: center;
    width: 72px;
    text-shadow: 0 1px 0 #FFFFFF;
    border-color: #BBBBBB;
    color: #464646;
   font-family: "Lucida Grande","Lucida Sans Unicode",Arial,Verdana,sans-serif;
}
#upload_button #my_files {  
 -moz-opacity:0;
  filter:alpha(opacity: 0);
  opacity: 0;
  position: absolute; 
  left:15px;
  width:100px;
}
#upload_button #pseudobutton{
  inherit: none;
  background-color:#F2F2F2;   
  width:69px;
  height: 19px;
  font-size:10px;
  /*position: absolute;*/
  border:none;  
 }
</style>

<div id="upload_button" >
<input type="button" id="pseudobutton" value="Open File">
<input type="file" name="my_files" id="my_files">
</div>