关闭

美化file表单的简单小技巧

1045人阅读 评论(0) 收藏 举报
今天看到有人在javascript论坛上问了一个"如何在一个页面点击按钮弹出一个路径选择对话框"的问题,有位朋友给出了一个比较好的解决办法,可以美称为"js事件乾坤大挪移".代码如下:
<input type="button" value="Select" onclick="path.click()" />
<input type="file" id="path" style="display:none;" />
这里实际上隐藏了原来的file表单,因为file表单按钮样式无法改变,这里用一个真实的按钮代替file的按钮.可以把file的click事件转移到button上.然后可以同样的模拟一个text框来代替file中的text框.然后加以美化即可.
的确可做一种美化file表单的巧妙方法.偶然想到的哦....

根据设想偶写的一段代码:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
</HEAD>
<BODY>
<input type="text" size="20" name="upfile" id="upfile" style="border:1px dotted #ccc">
<input type="button" value="浏览" onclick="path.click()" style="border:1px solid #ccc;background:#fff">
<input type="file" id="path" style="display:none" onchange="upfile.value=this.value">
</BODY>
</HTML>
0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:2286861次
    • 积分:26136
    • 等级:
    • 排名:第229名
    • 原创:1篇
    • 转载:1662篇
    • 译文:0篇
    • 评论:98条
    最新评论