原创超酷圆角带阴影焦点变色，还带提示按钮文本输入框

最新推荐文章于 2024-09-18 09:47:26 发布

xuStanly

最新推荐文章于 2024-09-18 09:47:26 发布

阅读量4.6k

点赞数

文章标签： html border input textbox behavior button

本文链接：https://blog.csdn.net/xuStanly/article/details/1204692

版权

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<STYLE>
v/:*{
behavior:url(#default#VML);
}
</STYLE>
<script>
function drawInput(id,name,type,value,event,ro,de,size,max){
var html = "";
if(navigator.appVersion.indexOf("MSIE") > 0){
  html += "<v:roundrect id='"+id+"_v' fillcolor='white' arcsize='0.1' strokecolor='black' strokeweight='1px' style='position:relative;top:0;left:0;width:"+size+";height:20'>";
  html += "<v:shadow on='T' type='single' color='#b3b3b3' offset='3px,3px'/>";
  html += "<v:TextBox inset='0,0,0,0' style='text-align:center;line-height:11pt;height:20'>";
  if(event != "" && /οnclick=/ig.test(event)){
   html += "<input id='"+id+"' type='"+type+"' name='"+name+"' maxlength='"+max+
    "' value='"+value+"' style='border:0px;background-color:#FFFFFF;width:"+(size-20)+
    "' "+ro+" "+de+" οnfοcus=this.style.backgroundColor='#E9EEF8' οnblur=this.style.backgroundColor='#FFFFFF'>";
   html += "<input type=button value='...' "+event+" style='border:0px;width:18px'>";
  }else{
   html += "<input id='"+id+"' type='"+type+"' name='"+name+"' maxlength='"+max+
    "' value='"+value+"' "+event+" style='border:0px;background-color:#FFFFFF;width:"+size+
    "' "+ro+" "+de+" οnfοcus=this.style.backgroundColor='#E9EEF8' οnblur=this.style.backgroundColor='#FFFFFF'>";
  }
  html += "</v:TextBox></v:roundrect>";
}else{
  html += "<input id='"+id+"' type='"+type+"' name='"+name+"' maxlength='"+max+
    "' value='"+value+"' "+event+" style='background-color:#FFFFFF;width:"+size+
    "' "+ro+" "+de+" οnfοcus=this.style.backgroundColor='#E9EEF8' οnblur=this.style.backgroundColor='#FFFFFF'>";
}
try{document.write(html);}
catch(e){document.write(e);}
}
</script>
</head>

<body>
<div><script>drawInput("cdate","","text","测试框一","οnclick=alert(this.previousSibling.value)","readonly","",280,80)</script></div>
<div><script>drawInput("price3","","text","","οnchange='this.value=parseFloat(this.value).toFixed(2)'","","",280,40)</script></div>
只有文本框具有onclick事件时，才会显示按钮
</body>
</html>