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

最新推荐文章于 2024-08-01 14:56:00 发布

技术好奇心

最新推荐文章于 2024-08-01 14:56:00 发布

阅读量5.4k

点赞数 1

分类专栏： HTML 文章标签： html 表单

本文链接：https://blog.csdn.net/ChenYanXX/article/details/52685405

版权

HTML 专栏收录该内容

0 篇文章 0 订阅

订阅专栏

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

那么具体如何操作呢？

在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等文本框为只读不可编辑的方法

12-02

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

html中的input文本框禁止输入问题

黑暗世界的自由

01-04

2474

我们在进行前端页面开发时，经常会遇到输入框禁止输入的问题，html中提供了三种方式来解决，readonly、disabled、autocomplete。严格地讲前两种才是禁止用户输入，而autocomplete只是默认清除用户的输入记录。 readonly：顾名思义，表示该输入域的值只能read，不能write，他仅仅只能与 type="text" 配合使用，可复制，可选择，可以接收...

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

input禁止输入的4种方法

最新发布

青茶

08-01

1065

input type="text" value="哈哈哈" disabled="disabled"> //只读不可复制，无法选择，文字会变成灰色。<input type="text" value="哈哈哈" readonly="readonly"> //使用readonly，字段为只读可复制。<input type="text" value="哈哈哈" onfocus="this.blur();

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

weixin_34732699的博客

05-31

4409

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

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

m0_46331061的博客

02-21

480

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

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

weixin_29095049的博客

06-04

1806

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

Django Form设置文本框为readonly操作

12-17

本篇将详细介绍如何在Django Form中设置文本框（input field）为只读（readonly）。方法一：首先，我们在`forms.py`文件中创建一个自定义的`my_info_form`类，定义用户所需的字段，如`user_id`、`user_name`和`...

JS获取及设置TextArea或input文本框选择文本位置的方法

10-24

通过获取和设置TextArea或input文本框中的选择文本位置，可以增强网页的交互性和用户体验。JavaScript提供了实现这些功能的方法。首先，我们需要了解如何获取文本框中用户选中的文本位置。这可以通过编写一个函数...

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

向着光芒的女孩

11-19

2753

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

readonly 和 disable的区别

weixin_34375054的博客

06-02

177

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

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

weixin_42502146的博客

06-04

926

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...

让input框中的部分文字无法删除的实现方式

weixin_34061555的博客

11-05

1075

你有没有这种需求，文本输入框中的内容，前半部分保持不变，只让用户操作后半部分，如果有就来看看我的实现方法，很简单的方法看到上图了吗？文本框的前半部分是没有办法修改的，用户只能在目前的域名后面进行输入，实现代码如下：<HTML> <BODY> <label style="margin-right: -245px;">http://www.xi...

让input不可选的几种方法

bluewhale的专栏

04-02

3167

让input不可选的几种方法方法1: onfocus=this.blur() 方法2:readonly 方法3: disabled

html select不允许选择,设置select下拉框不能选择

weixin_29554335的博客

06-03

1万+

今天在做一个小功能的时候，需要对特定的一个select设置禁止选择，只好采用js进行控制，接下来吾爱编程为大家介绍一下设置select下拉框不能选择的方法，有需要的小伙伴可以参考一下：1、功能需求：用户在选择了对应的“新闻资讯”分类之后，后面的对应的目录，设置为不可选择的。2、思路分析：设置select下拉框不能选择，我们可以利用disabled="disabled"。3、程序代码：$("sele...

设置input文本框不可编辑的方法

徊忆羽菲

04-23

418

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

input文本框前几个字符为默认，无法修改