사파리 브라우저의 input 효과 비슷하게 하기

사파리 브라우저의 경우 input 텍스트 필드에 포인터가 있을경우 표시를 해준다
이와 비슷한 기능이 필요하고자 하는경우 써보자~

// 공통 input

function replaceText(objValue, srcStr, desStr)
{
 var str = objValue;

 while(str.indexOf(srcStr) != -1)
  str = str.replace(srcStr, desStr);

 return str;
}

function getBrowerType()
{
 if(navigator.appName == "Microsoft Internet Explorer")
  return "IE";
 else if(navigator.appName == "Netscape")
  return "Netscape";
}

function convertSizeWidth(width, size)
{
 if(width)
  return parseInt(width.replace("px", ""), 10);
 else
  return 100;

}

function onFocus(obj)
{
 if(obj.className.indexOf("Off") > 0){
  var objWidth = convertSizeWidth(obj.style.width, obj.size);
  obj.style.width = (objWidth-2) + "px";
  obj.className = replaceText(obj.className, "Off", "On");

 }
}

function onBlur(obj)
{
 if(obj.className.indexOf("On") > 0){
  var objWidth = parseInt(obj.style.width.replace("px", ""), 10);
  obj.style.width = (objWidth+2) + "px";
  obj.className = replaceText(obj.className, "On", "Off");
 }
}

// css
.inputOn {height:16px; border-top:2px solid #cc9e7f; border-right:2px solid #e9ba9a; border-bottom:2px solid #e9ba9a; border-left:2px solid #e9ba9a; background:#fffdfc; line-height:16px;}
.inputOff {height:18px; border-top:1px solid #666; border-right:1px solid #bbb; border-bottom:1px solid #bbb; border-left:1px solid #666; line-height:18px;}

적용
<input type="text" name="" value" style="width:214px;" onfocus="onFocus(this)" onblur="onBlur(this)" class="inputOff" />

인라인으로 사이즈를 주면 사이즈별 클래스를 만들지 않아도 된다