`
daniel_tu
  • 浏览: 182568 次
  • 性别: Icon_minigender_1
  • 来自: 深圳
社区版块
存档分类
最新评论

使input type="file" 不可编辑

    博客分类:
  • Web
阅读更多

今天在做项目的时候,遇到上传文本框的问题,
<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 显示的浏览 改成英文

    本篇文章将详细讲解如何将`&lt;input type="file"&gt;` 控件的“浏览”按钮和提示改为英文。 首先,我们需要理解`&lt;input type="file"&gt;`的基本结构和属性。这个标签创建了一个可以点击的区域,用户可以通过点击打开本地...

    Android-解决在webview中input标签type="file"不能使用的问题

    通过自定义`WebChromeClient`和正确处理文件选择的生命周期,我们可以使`&lt;input type="file"&gt;`在WebView中正常工作。在实际开发中,还应考虑兼容性和用户体验,确保用户能够顺畅地选择和上传文件。

    怎样让input type=file 只读,并能实现文件上传

    - **禁用**:意味着元素完全不可交互,既不能被编辑也不能被脚本所操作。 3. **JavaScript 的作用**:通过 JavaScript 可以实现动态控制表单元素的行为,包括设置只读属性等。 #### 二、HTML 实现 首先,我们来...

    css input[type=file] 样式美化(input上传文件样式 )

    本教程将详细介绍如何使用CSS对`input[type=file]`进行样式美化,使文件上传按钮更加符合网站的整体风格。 首先,我们来看一个简单的例子。在这个例子中,我们创建了两个不同的样式来展示如何自定义文件上传按钮: ...

    js 获取、清空input type="file"的值示例代码

    - 如果网页能够随意地读取或修改用户的文件路径,那么它可能会上传用户的敏感文件,给用户带来不可预知的安全威胁。 #### 5. 注意事项 - 在实际使用JavaScript操作文件输入框时,需要确保按照规范进行操作,避免...

    html修改FileUpload控件的浏览按钮的文字改为自定义

    &lt;input type="file" id="f" onchange="txt.value=this.value" name="f" style="position:absolute;filter:alpha(opacity=0);" size="1" hidefocus&gt; ``` 在这段示例代码中,可以看到三个主要部分: 1. **隐藏文件...

    js 实现 input type=file 文件上传示例代码

    在开发中,文件上传必不可少,&lt;input type=”file” /&gt; 是常用的上传标签,但是它长得又丑、浏览的字样不能换,我们一般会用让,&lt;input type=”file” /&gt;隐藏,点其他的标签(图片等)来时实现选择文件...

    CSS美化 input type=file 兼容各个浏览器

    首先,我们来看一下原始的`&lt;input type="file"&gt;`元素在浏览器中的默认样式,通常表现为一个简单的文本输入框和一个"浏览"按钮,样式各异,不符合现代网页设计的要求。设计师和产品经理往往希望将其与页面其他元素...

    判断多个input type=file是否有已经选择好文件的代码

    它们的样式被设置为不可编辑(`contentEditable="false"`),并且宽度设为80%,以适应页面布局。 接着,我们来看JavaScript部分,这里使用了jQuery库来处理交互。jQuery提供了一种简便的方式来遍历DOM中的元素集合...

    上传控件input file 样式美化

    在网页设计中,上传控件`&lt;input type="file"&gt;`是必不可少的元素,它允许用户选择本地文件并上传到服务器。然而,由于浏览器的安全限制,这个控件的默认样式通常非常简陋,无法直接通过CSS进行大幅度的美化。本教程将...

    input file上传图片预览

    由于浏览器的安全策略,不能直接使用File对象的URL,所以我们需要创建一个`FileReader`来读取文件内容并生成一个可安全使用的URL。 ```javascript const reader = new FileReader(); reader.onload = function...

    INPUT的TYPE用法

    &lt;input type="text" name="yourname" size="30" maxlength="20" readonly value="只可阅读"&gt; ``` ### 2. `type="password"` - 密码输入 `type="password"`与`type="text"`类似,但输入的字符会被隐藏,以星号或...

    ng-upload:Angular.js填充程序可处理input [type = file]'change'事件

    具体来说,input [file]不支持通过ng-model进行数据绑定和事件处理。 ng-upload是填补该遗漏的小填充物。指示安装方式如下: npm install --save ng-upload包含类似的内容(例如,对于构建): require('ng-upload'...

    关于input的file 控件及美化

    3. 将原始的`&lt;input type="file"&gt;`控件绝对定位,使其覆盖在模拟元素上。 4. 隐藏原始的file输入控件,但保持其可点击。 下面是一个示例代码,展示了如何通过CSS对file输入控件进行美化: ```html &lt;!doctype html&gt;...

    button和input type=button的区别及注意事项

    另一方面,`&lt;input type="button"&gt;`是更简单的元素,只接受`value`属性来设置按钮上显示的文本。它不支持像`&lt;button&gt;`那样嵌入HTML内容。这使得`&lt;input type="button"&gt;`在某些情况下更为轻量级,但在样式和功能方面...

    隐藏file元素

    1. **隐藏File元素**:首先,需要将`&lt;input type="file"&gt;`元素设置为不可见。这可以通过CSS属性如`visibility:hidden;`或`display:none;`来实现。 2. **触发File元素**:接下来,在其他控件(如图片、按钮等)的点击...

    input标签里面的name与value的区别

    type="button",这就是一个按钮) type可选的值如下: button 按钮 checkbox 复选按钮组件 file 文件上传组件 hidden 隐藏域 image 图片区域 password 密码输入文本框 radio 单选按钮组件 reset 重置表单按钮 submit...

    如何点击a标签实现弹出input file上传文件对话框

    在网页设计中,有时我们希望用户能够通过点击一个链接(a标签)来触发文件上传功能,而不是使用传统的`&lt;input type="file"&gt;`标签。这种交互方式可以使界面更加友好和美观。下面我们将详细介绍如何实现这个功能,涉及...

    bootstrap-file-input

    在网页设计中,文件上传功能通常是必不可少的,但原始的HTML `&lt;input type="file"&gt;` 元素往往功能简单,样式单一。Bootstrap-File-Input插件则提供了丰富的自定义选项,如多文件选择、预览、进度条、拖放上传、文件...

    AspUpload.zip

    如果我们的表单只含有一个文件输入框,如:&lt;INPUT TYPE=FILE NAME="ONLYFILE"&gt;,那么就用不着使用for-each语句,我们可以简单这么写: Response.Write Upload.Files("ONLYFILE").Path 或者更通常的可以用 Response....

Global site tag (gtag.js) - Google Analytics