Input file 文件选择框美化 支持Firefox

闲来无事写了一个.也许用得上

在FF2,IE7,IE6下测试通过

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <meta name="author" content="wuleying" />
  6. <!--<script type="text/javascript" src="ajax.js"></script>-->
  7. <title>测试上传文件</title>
  8. <style type="text/css">
  9. * {font-size:12px;margin:0;}
  10. body {background:#fff;}
  11. form {margin:12px;}
  12. input.file{
  13.     vertical-align:middle;
  14.     position:relative;
  15.     left:68px;
  16.     *left:-218px;
  17.     filter:alpha(opacity=0);
  18.     opacity:0;
  19.     z-index:1;
  20.     *width:223px;
  21.     display:none;
  22. }
  23. form input.viewfile {
  24.     z-index:99;
  25.     border:1px solid #ccc;
  26.     padding:2px;
  27.     width:150px;
  28.     vertical-align:middle;
  29.     color:#999;
  30. }
  31. form p span {
  32.     float:left;
  33. }
  34. form label.bottom {
  35.     border:1px solid #38597a;
  36.     background:#4e7ba9;
  37.     color:#fff;
  38.     height:19px;
  39.     line-height:19px;
  40.     display:block;
  41.     width:60px;
  42.     text-align:center;
  43.     cursor:pointer;
  44.     float:left;
  45.     position:relative;
  46.     *top:1px;
  47. }
  48. form input.submit {
  49.     border:0;
  50.     background:#380;
  51.     width:70px;
  52.     height:22px;
  53.     line-height:22px;
  54.     color:#fff;
  55.     cursor:pointer;
  56. }
  57. p.clear {
  58.     clear:left;
  59.     margin-top:12px;
  60. }
  61. p.filep {
  62.     height:25px;
  63. }
  64. p.clear input {
  65.     float:left;
  66.     margin-right:6px;
  67. }
  68. #error {
  69.     padding-top:5px;
  70.     color:#f00;
  71. }
  72. </style>
  73. </head>
  74. <body>
  75. <form action="" onsubmit="return send();" method="post" name="upfiles" enctype="multipart/form-data"><br />
  76. <input type="hidden" name="max_file_size" value="2097152" />
  77. <input type="hidden" name="do" value="upload" />
  78. <p class="filep">
  79.     <span>
  80.         <label for="viewfile">上传文件：</label>
  81.         <input type="text" onmouseout="document.getElementById('upload').style.display='none';" name="viewfile" id="viewfile" class="viewfile" />
  82.     </span>
  83.     <label for="upload" class="bottom" onmouseover="document.getElementById('upload').style.display='block';">查找文件</label><input type="file" id="upload" size="27" name="upload[]" onchange="document.getElementById('viewfile').value=this.value;this.style.display='none';" class="file" />
  84. </p>
  85. <p class="clear"><input class="submit" type="submit" value="确定上传" /><div id="error"></div></p>
  86. </form>
  87. </body>
  88. </html>
Tags : , , , , ,
0 条评论

CSS小技巧,文字与Input垂直居中对齐

  • 2007-11-22
  • 分类：XHTML+CSS
  • 作者：银子
  • 261 次查看

最近跟表单经常打交道，经常出现文字与所对应该的input不能垂直居中对齐的问题(文字默认是与input底部对齐的),查找了下css2.0帮助手册,找到了解决办法，原来是这么easy.

<p>
<input type="text" name="author" id="author" style="vertical-align:middle" />
<label for="author"><small>呢称</small></label>
</p>

vertical-align:middle
将支持 valign 特性的对象的内容与对象中部对齐

Tags : , , , ,
0 条评论

Input 设为只读 readonly 与 disabled 的区别

  • 2007-11-17
  • 分类：XHTML+CSS
  • 作者：银子
  • 204 次查看

怎样使input中的内容为只读，也就是说不让用户更改里面的内容。

  1. <input type="text" name="input1" value="中国" onfocus=this.blur() />
  2. <input type="text" name="input1" value="中国" readonly />
  3. <input type="text" name="input1" value="中国" disabled />

最好不要用disabled,不然就无法取出里面的值了.

  1. <input type="text" name="input1" value="中国" readonly="true" />
  2. <input type="text" name="input1" value="中国" readonly style="color:#999 ;" />

注意:在JS更改readonly属性时区分大小写 readOnly

Tags : , ,
0 条评论

Input高级用法

  • 2007-11-17
  • 分类：JavaScript
  • 作者：银子
  • 79 次查看

1.取消按钮按下时的虚线框
在input里添加属性值 hideFocus 或者 HideFocus=true

2.只读文本框内容
在input里添加属性值 readonly

3.防止退后清空的TEXT文档(可把style内容做做为类引用)

  1. <input style=behavior:url(#default#savehistory); type=text id=oPersistInput>

4.ENTER键可以让光标移到下一个输入框

  1. <input onkeydown="if(event.keyCode==13)event.keyCode=9" >

5.只能为中文(有闪动)

  1. <input onkeyup="value=value.replace(/[ -~]/g,’’)" onkeydown="if(event.keyCode==13)event.keyCode=9">

6.只能为数字(有闪动)

  1. <input onkeyup="value=value.replace(/[^\d]/g,’’) "onbeforepaste="clipboardData.setData(’text’,clipboardData.getData(’text’).replace(/[^\d]/g,’’))">

7.只能为数字(无闪动)

  1. <input style="ime-mode:disabled" onkeydown="if(event.keyCode==13)event.keyCode=9" onKeyPress="if ((event.keyCode<48 || event.keyCode>57)) event.returnValue=false">

8.只能输入英文和数字(有闪动)

  1. <input onkeyup="value=value.replace(/[\W]/g,’’)" onbeforepaste="clipboardData.setData(’text’,clipboardData.getData(’text’).replace(/[^\d]/g,’’))">

9.屏蔽输入法

  1. <input type="text" name="url" style="ime-mode:disabled" onkeydown="if(event.keyCode==13)event.keyCode=9">

10. 只能输入 数字，小数点，减号（-） 字符(无闪动)

  1. <input onKeyPress="if (event.keyCode!=46 && event.keyCode!=45 && (event.keyCode<48 || event.keyCode>57)) event.returnValue=false">

11. 只能输入两位小数，三位小数(有闪动)

  1. <input maxlength=9 onkeyup="if(value.match(/^\d{3}$/))value=value.replace(value,parseInt(value/10)) ;value=value.replace(/\.\d*\./g,’.’)" onKeyPress="if((event.keyCode<48 || event.keyCode>57) && event.keyCode!=46 && event.keyCode!=45 || value.match(/^\d{3}$/) || /\.\d{3}$/.test(value)) {event.returnValue=false}" id=text_kfxe name=text_kfxe>
Tags : ,
0 条评论

浏览最多的10篇日志

评论最多的10篇日志

随机显示的10篇日志