Input file 文件选择框美化 支持Firefox(0 位领导批示)

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

在FF2,IE7,IE6下测试通过

?View Code XHTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="author" content="wuleying" />
<!--<script type="text/javascript" src="ajax.js"></script>-->
<title>测试上传文件</title>
<style type="text/css">
* {font-size:12px;margin:0;}
body {background:#fff;}
form {margin:12px;}
input.file{
	vertical-align:middle;
	position:relative;
	left:68px;
	*left:-218px;
	filter:alpha(opacity=0);
	opacity:0;
	z-index:1;
	*width:223px;
	display:none;
}
form input.viewfile {
	z-index:99;
	border:1px solid #ccc;
	padding:2px;
	width:150px;
	vertical-align:middle;
	color:#999;
}
form p span {
	float:left;
}
form label.bottom {
	border:1px solid #38597a;
	background:#4e7ba9;
	color:#fff;
	height:19px;
	line-height:19px;
	display:block;
	width:60px;
	text-align:center;
	cursor:pointer;
	float:left;
	position:relative;
	*top:1px;
}
form input.submit {
	border:0;
	background:#380;
	width:70px;
	height:22px;
	line-height:22px;
	color:#fff;
	cursor:pointer;
}
p.clear {
	clear:left;
	margin-top:12px;
}
p.filep {
	height:25px;
}
p.clear input {
	float:left;
	margin-right:6px;
}
#error {
	padding-top:5px;
	color:#f00;
}
</style>
</head>
<body>
<form action="" onsubmit="return send();" method="post" name="upfiles" enctype="multipart/form-data"><br />
<input type="hidden" name="max_file_size" value="2097152" />
<input type="hidden" name="do" value="upload" />
<p class="filep">
	<span>
		<label for="viewfile">上传文件：</label>
		<input type="text" onmouseout="document.getElementById('upload').style.display='none';" name="viewfile" id="viewfile" class="viewfile" />
	</span>
	<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" />
</p>
<p class="clear"><input class="submit" type="submit" value="确定上传" /><div id="error"></div></p>
</form>
</body>
</html>
Tags : , , , , ,
0 位领导批示

CSS小技巧,文字与Input垂直居中对齐(1 位领导批示)

  • 2007-11-22
  • 分类：XHTML+CSS
  • 作者：银子
  • 5,289 位领导视察

最近跟表单经常打交道，经常出现文字与所对应该的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 : , , , ,
1 位领导批示

Input 设为只读 readonly 与 disabled 的区别(1 位领导批示)

  • 2007-11-17
  • 分类：XHTML+CSS
  • 作者：银子
  • 4,846 位领导视察

怎样使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 : , ,
1 位领导批示

Input高级用法(0 位领导批示)

  • 2007-11-17
  • 分类：JavaScript
  • 作者：银子
  • 1,307 位领导视察

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篇日志