关于只读文本输入框

近来在论坛上经常看到有些网友询问如何才能使文件上传 输入框设置为只读。狂人想到一个解决方法,现与大家分享。

我们知道,在网页上显示文件上传控件的语句是<input type="file"> 。在此当中,并不能对显示的输入框进行任何的设置,如果添加参数“readOnly”,则就连“浏览”按钮也不能用了。因此,狂人觉得,必须绕个弯才能解决问题。

于是狂人想到了javascript,经过一番调试,终于实现了上述功能。主要思路是采用CSS把FILE输入框隐藏掉,新增加一个TEXT的输入框,把其属性设置为readonly,通过JS把从选择文件得到的值传递给text文本框。下面是完整代码,只要把整段代码复制粘贴后运行就可以看到效果。

[CODE]:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>只读文件上传输入框例子</title>
<!--设置宽度为0,边框为白色(与页面背景色相同)的CSS样式-->

<style type="text/css">
<!--
.fileinput {
width: 0px;
border: #FFFFFF;
}
-->
</style>
<script>
function getvalue()
{
form1.textfield.value=form1.file.value
}
</script>
</head>

<body>
<form name="form1" method="post" action="">
    <input type="text" name="textfield" readonly=""><!--独立的输入框,其值通过读取控件file的值取得-->
    <input name="file" type="file" class="fileinput" onChange="return getvalue()"><!--使用css,隐藏控件本身的输入框-->
</form>
</body>
</html>


转载于:https://my.oschina.net/meSpace/blog/41135

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值