今天在做项目的时候,遇到上传文本框的问题,
<input type="file" size="100" name="photoupload" />
在firefox中,该控件产生的文本框是默认不可编辑的,但是在IE下,该文本框可编辑,
根据用户需要,此文本框应为不可编辑。
但是直接将其设置为“readonly”或者“disabled”后,对应的浏览按钮也无法使用了。所以此法不通。
在网上搜索了一些资料,主要有以下几种方法:
1.变通处理:
<input type=file id=a1 style="visibility:hidden">
<input id=a2 type=text readonly>
<input type=button value=浏览 onclick="a1.click(); a2.value= a1.value">
2.增加如下属性:
contenteditable="false"
实例代码:
<input type="file" style="width: 446px" id="ptlFile" contenteditable="false"/>
对比一下,第二种简单方便,问题解决。
分享到:
相关推荐
本篇文章将详细讲解如何将`<input type="file">` 控件的“浏览”按钮和提示改为英文。 首先,我们需要理解`<input type="file">`的基本结构和属性。这个标签创建了一个可以点击的区域,用户可以通过点击打开本地...
通过自定义`WebChromeClient`和正确处理文件选择的生命周期,我们可以使`<input type="file">`在WebView中正常工作。在实际开发中,还应考虑兼容性和用户体验,确保用户能够顺畅地选择和上传文件。
- **禁用**:意味着元素完全不可交互,既不能被编辑也不能被脚本所操作。 3. **JavaScript 的作用**:通过 JavaScript 可以实现动态控制表单元素的行为,包括设置只读属性等。 #### 二、HTML 实现 首先,我们来...
本教程将详细介绍如何使用CSS对`input[type=file]`进行样式美化,使文件上传按钮更加符合网站的整体风格。 首先,我们来看一个简单的例子。在这个例子中,我们创建了两个不同的样式来展示如何自定义文件上传按钮: ...
<input type="file" id="f" onchange="txt.value=this.value" name="f" style="position:absolute;filter:alpha(opacity=0);" size="1" hidefocus> ``` 在这段示例代码中,可以看到三个主要部分: 1. **隐藏文件...
- 如果网页能够随意地读取或修改用户的文件路径,那么它可能会上传用户的敏感文件,给用户带来不可预知的安全威胁。 #### 5. 注意事项 - 在实际使用JavaScript操作文件输入框时,需要确保按照规范进行操作,避免...
在开发中,文件上传必不可少,<input type=”file” /> 是常用的上传标签,但是它长得又丑、浏览的字样不能换,我们一般会用让,<input type=”file” />隐藏,点其他的标签(图片等)来时实现选择文件...
首先,我们来看一下原始的`<input type="file">`元素在浏览器中的默认样式,通常表现为一个简单的文本输入框和一个"浏览"按钮,样式各异,不符合现代网页设计的要求。设计师和产品经理往往希望将其与页面其他元素...
它们的样式被设置为不可编辑(`contentEditable="false"`),并且宽度设为80%,以适应页面布局。 接着,我们来看JavaScript部分,这里使用了jQuery库来处理交互。jQuery提供了一种简便的方式来遍历DOM中的元素集合...
在网页设计中,上传控件`<input type="file">`是必不可少的元素,它允许用户选择本地文件并上传到服务器。然而,由于浏览器的安全限制,这个控件的默认样式通常非常简陋,无法直接通过CSS进行大幅度的美化。本教程将...
由于浏览器的安全策略,不能直接使用File对象的URL,所以我们需要创建一个`FileReader`来读取文件内容并生成一个可安全使用的URL。 ```javascript const reader = new FileReader(); reader.onload = function...
<input type="text" name="yourname" size="30" maxlength="20" readonly value="只可阅读"> ``` ### 2. `type="password"` - 密码输入 `type="password"`与`type="text"`类似,但输入的字符会被隐藏,以星号或...
具体来说,input [file]不支持通过ng-model进行数据绑定和事件处理。 ng-upload是填补该遗漏的小填充物。指示安装方式如下: npm install --save ng-upload包含类似的内容(例如,对于构建): require('ng-upload'...
3. 将原始的`<input type="file">`控件绝对定位,使其覆盖在模拟元素上。 4. 隐藏原始的file输入控件,但保持其可点击。 下面是一个示例代码,展示了如何通过CSS对file输入控件进行美化: ```html <!doctype html>...
1. **隐藏File元素**:首先,需要将`<input type="file">`元素设置为不可见。这可以通过CSS属性如`visibility:hidden;`或`display:none;`来实现。 2. **触发File元素**:接下来,在其他控件(如图片、按钮等)的点击...
type="button",这就是一个按钮) type可选的值如下: button 按钮 checkbox 复选按钮组件 file 文件上传组件 hidden 隐藏域 image 图片区域 password 密码输入文本框 radio 单选按钮组件 reset 重置表单按钮 submit...
在网页设计中,有时我们希望用户能够通过点击一个链接(a标签)来触发文件上传功能,而不是使用传统的`<input type="file">`标签。这种交互方式可以使界面更加友好和美观。下面我们将详细介绍如何实现这个功能,涉及...
在网页设计中,文件上传功能通常是必不可少的,但原始的HTML `<input type="file">` 元素往往功能简单,样式单一。Bootstrap-File-Input插件则提供了丰富的自定义选项,如多文件选择、预览、进度条、拖放上传、文件...
如果我们的表单只含有一个文件输入框,如:<INPUT TYPE=FILE NAME="ONLYFILE">,那么就用不着使用for-each语句,我们可以简单这么写: Response.Write Upload.Files("ONLYFILE").Path 或者更通常的可以用 Response....
<input id="File1" type="file" accept=".xls,.doc,.txt,.pdf" /> ``` `accept`属性值是一个逗号分隔的MIME类型列表或文件扩展名列表。在上面的例子中,`.xls`对应Excel文件,`.doc`对应Word文档,`.txt`对应纯文本...