HTML中设置input等文本框为不可操作

最新推荐文章于 2023-10-16 15:40:52 发布

原创最新推荐文章于 2023-10-16 15:40:52 发布 · 5.6k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#html #表单

HTML 专栏收录该内容

0 篇文章

订阅专栏

本文介绍在HTML中使用disabled与readonly属性来控制输入框的状态。disabled使输入框变为灰色且不可操作；readonly保留输入框外观不变但阻止编辑。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在特定场景下，我们可能不允许用户操作或者更改表单项

那么具体如何操作呢？

在html中，我们大概有两种方法可以实现，或者说两个属性

分别为：

disabled=“disabled”
readonly=“true"

它们的区别在于

disabled：设置后，input区域为灰色，不可手动操作
readonly：设置后，除了不可手动操作后，其余和普通input无异

详情请参考如下代码和演示

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>demo</title>
</head>
<body>
	<input type="text" readonly="true" value="demo1">
	<br />
	<input type="text" disabled="disabled" value="demo2">
</body>
</html>

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

技术好奇心

关注关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

HTML中让表单input等文本框为只读但可以写入内容的方法

kerryqpw的博客

05-16

1847

HTML中让表单input等文本框为只读但可以写入内容的方法有时候，我们希望表单中的文本框是只读的，让用户不能修改其中的信息，如使input text的内容，中国两个字不可以修改有时候，我们希望表单中的文本框是只读的，让用户不能修改其中的信息，如使<input type="text" name="input1" value="中国"> 的内容，"中国"两个字不可以修改...

html输入框只能扫描枪,vue.js 扫码枪 input 输入法问题

weixin_42502146的博客

06-04

1081

Vue.component('com1', {template: '#com1',data() {return {code: ''}},methods: {onkeypress(e) {if (e.keyCode === 13) {const val = e.target.valueif (val === this.code) {this.$emit('done', val)}else {this...

参与评论您还未登录，请先登录后发表或查看评论

HTML -- 使input文本框不可编辑的2种方法（有disabled属性的input框，后台获取不到值）

天行健君子以自强不息，地势坤君子以厚德载物。

05-29

4500

1. 使input文本框不可编辑的3种方法 1.1 disabled disabled 属性规定应该禁用 input 元素，被禁用的 input 元素，不可编辑，不可复制，不可选择，不能接收焦点，后台也不会接收到传值。设置后文字的颜色会变成灰色。disabled 属性无法与 <input type="hidden"> 一起使用。示例：<input type="text" disabled="disabled" /> 1.2 readonly readonly 属性规定输入字段为

html表单（input下拉，禁止textarea拉伸）

minalee

04-25

2886

输入框获取焦点不弹出历史输入<input type="text" autocomplete="off"> 禁止textarea拉伸 style="resize:none"

HTML中限制input 输入框输入内容

cnds123的专栏

07-12

9044

先介绍使用 oninput 事件，限制HTML中input 输入框输入内容的方式，再介绍用其它方式限制HTML中input 输入框输入内容。

html实现输入框不可用状态,2种方法设置输入框不可编辑

weixin_34732699的博客

05-31

4547

这篇文章主要是对几种设置表单元素中文本输入框不可编辑的方法进行了总结介绍。一般有2种方法使input文本框不可编辑。javascript设置输入框不可编辑的方法：1、使用disabled属性设置disabled属性规定应该禁用input元素，被禁用的input元素既不可用，也不可点击。可以设置disabled属性，直到满足某些其他的条件为止(比如选择了一个复选框等等)。然后，就需要通过JavaSc...

HTML中让表单input等文本框为只读不可编辑的方法

12-02

本文将详细讲解如何在HTML中设置`<input>`元素为只读或不可编辑状态。首先，我们可以使用`readonly`属性来创建一个只读的文本框。例如： ```html <input type="text" name="input1" value="中国" readonly> ``` ...

Django Form设置文本框为readonly操作

09-16

补充知识：在HTML中，有三种方式可以设置输入元素为不可编辑状态： 1. `disabled`属性：当设置`disabled`属性时，输入元素不仅变为只读，还无法聚焦、复制或选择其内容。同时，后台不会接收到该字段的值。例如：`...

html中让文本框不可编辑，禁止用户修改

m0_46331061的博客

02-21

528

这里有两个属性可使用disabled，readonly两者都可以锁定文本框 但是两者有区别 disabled完全禁止与设置该属性的对象交互，包括不可修改，不可提交（所以后端获取不到拥有该属性的文本框的值，始终为null） readonly不可修改，但可提交。 ...

input标签禁止让用户手动输入

weixin_33980459的博客

02-15

1550

1. 替代法使用隐藏的<input type="file"/>控件，然后用一个只读的文本框和一个按钮来模拟<input type="file"/>的功能。 <input type="file" name="file" onpropertychange="file1.value=this.value" style=display:...

readonly 和 disable的区别

weixin_34375054的博客

06-02

219

Readonly和Disabled它们都能够做到使用户不能够更改表单域中的内容。但是它们之间有着微小的差别，总结如下： Readonly只针对input(text / password)和textarea有效，而disabled对于所有的表单元素都有效，但是表单元素在使用了disabled后，当我们将表单以POST或GET的方式提交的话，这个元素的值不会被传递出去，而readonly...

HTML中输入域（INPUT）变灰

热门推荐

u014162349的专栏

04-02

1万+

只读，写不进，但字不变灰：只读，写不进，字也变灰：

html禁止鼠标操作

驱动开发

04-26

2628

在html页面禁止鼠标操作： oncontextmenu="return false" ondragstart="return false" onselectstart="return false" onselect="document.selection.empty()" oncopy

【html】四种方法禁止输入框输入

向着光芒的女孩

11-19

3219

方法一：disabled 方法二：disabled=”disabled” 方法三：readonly 方法四：通过Javascript先获取焦点再失去焦点完整例子具体代码：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>禁止输入</title> </head> <body> <di

html输入框只能扫描枪,输入框禁止手动输入，只允许扫描枪

weixin_29095049的博客

06-04

1952

禁止手动输入，只允许扫描枪//*****2020-08-05**********条码输入窗口要设置成只能条码枪扫入，禁止键盘和复制粘贴的功能*****************************var keyDownTime = 0; //按下的时间var temp = 0; //用于检查相邻两次按键，上一次按键按下的时间//按键按下记录摁下时间YAHOO.util....

怎样实现标签的禁用？

weixin_52369825的博客

10-16

887

在HTML中，可以使用 disabled 属性来禁用标签。当该属性被设置为 "disabled" 时，标签将变为不可用状态，不能被点击、选中或提交。需要注意的是，禁用状态的标签会在页面中呈现灰色，并且无法响应用户交互动作。您可以使用CSS样式来自定义禁用状态的外观，例如更改字体颜色或背景颜色等。

input文本框只能刷卡不能手动输入

weixin_33908217的博客

09-09

765

最近在做一个B/S系统，遇到一问题：客户要求只能刷卡不能手动输入 到网上搜一下，没有找到好的方法，最后只能用延时来取巧，虽不能完全实现，但也还可以，呵呵因为刷卡时触发了事件keypress、keyup、onkeydown，所以不能从这方面下手; 鉴于手动输入与刷卡的速度不一样，在以上onkeyup事件中加了一个延时： <html><head><scrip...

html中input文本框长度

最新发布

04-23

### 设置 HTML 中 input 文本框的长度在 HTML 的 `<input>` 元素中，`size` 和 `maxlength` 是两个用于控制文本框显示和输入行为的重要属性。 #### 1. **`size` 属性** `size` 属性定义了文本框的可视宽度。对于 `<input type="text">` 和 `<input type="password">` 类型，它表示可以同时看到的字符数量[^1]。然而，在现代浏览器中，`size` 更常被解释为以像素为单位的宽度[^2]。这意味着即使设置了 `size="5"`，实际显示的宽度可能会因字体大小和其他样式而有所不同。以下是使用 `size` 属性的一个简单示例： ```html <input type="text" name="example" size="10"> ``` #### 2. **`maxlength` 属性** `maxlength` 属性则限制用户可以在文本框中输入的最大字符数。无论文本框的实际视觉尺寸如何，一旦达到指定的字符限制，用户将无法继续输入更多内容[^2]。下面是一个结合 `size` 和 `maxlength` 的例子： ```html <form> 输入学号：<br> <input type="text" name="sno" size="5" maxlength="10"><br><br>  <input type="submit" value="提交"> </form> ``` 在这个例子中，尽管文本框只允许显示大约 5 个字符宽的内容 (`size="5"`)，但是用户仍然能够输入多达 10 个字符 (`maxlength="10"`)。 #### 3. **CSS 替代方案** 需要注意的是，随着 CSS 的普及和发展，许多开发者更倾向于通过 CSS 来调整文本框的外观而不是依赖于 `size` 属性。例如，可以通过设置 `width` 样式来精确控制文本框的宽度： ```html <style> .custom-width { width: 150px; } </style> <input type="text" class="custom-width" maxlength="20"> ``` 这种方式提供了更大的灵活性，并且更容易与其他页面布局协调一致。 --- ### 总结为了设置 HTML 中 `<input>` 文本框的长度，可以选择使用 `size` 或者 CSS 的 `width` 属性来决定其视觉上的宽度；与此同时，利用 `maxlength` 属性限定用户的最大输入量。这两种方法各有优劣，具体取决于项目需求和个人偏好[^1]。