让form表单的input文本框不可编辑的方法

最新推荐文章于 2024-07-29 14:52:42 发布
最新推荐文章于 2024-07-29 14:52:42 发布
阅读量1.2w 收藏 5
点赞数 2
分类专栏： 遇到的各种报错和小BUG 文章标签： html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_38958597/article/details/82393386
版权

有两种方法可以达到类似的效果：
disabled ：属性规定禁用 input 元素，不可编辑，不可复制，不可选择，不能接收焦点，
后台也不会接收到传值。设置后文字的颜色会变成灰色。disabled 属性无法与<input type="hidden"> 一起使用。

readonly： 属性规定输入字段为只读，不可编辑，可复制，可选择，可接收焦点，还可以用Tab键切换到该字段，而且后台会接收到传值。设置后文字的颜色会变成灰色。

Hal白夜
关注
专栏目录
js 使FORM表单的所有元素不可编辑的示例代码
12-04
代码如下: //使页面不可编辑 function disableOcx() { var form = document.forms[0]; for ( var i = 0; i < form.length; i++) { var element = form.elements[i]; //部分元素可以编号 element.name 是元素自定义 name if (element.name != “auditEntity.auditContent” && element.name != “auditEntity.auditAutograph” && element.name != “auditE
html表单中的input内容禁止修改（只读）实例
1002710030
02-26 577
<?php echo $_POST["dd"]; //验证传值是否正常 ?> <form method="post" action=""> <input type="text" name="xm1" value="123" readonly=""> <input type="submit" value="提交"> </form>
form表单的input标签生成不可编辑的文本框、密码框
majic_Jing的博客
09-25 621
form表单的input标签生成不可编辑的文本框、密码框 不可编辑的文本框 首先不可编辑的文本框即为只读模式，看一下与普通文本框在效果上的区别： 可以看见不可编辑的文本框鼠标点击时，没有显示可输入的光标，其实代码很简单，只需在input属性中加一个readonly即可，现在上干货： <body> <form action="http://www.crazy.org" met...
Input 标签的 Type 属性及其含义详解
最新发布
一个做过前端开发的产品经理，经历过睿智产品的折磨导致脱发之后，励志要翻身"农奴"把歌唱，一边打入敌人内部一边持续提升自己，为我们广大开发同胞谋福祉，坚决抵制睿智产品折磨我们码农兄弟！
07-29 1694
希望您在这里可以感受到一份轻松愉快的氛围，不仅可以获得有趣的内容和知识，也可以畅所欲言、分享您的想法和见解。浏览器会对输入的内容进行基本的验证，确保它符合电子邮件的格式。浏览器会对输入的内容进行基本的验证，确保它符合 URL 的格式。搜索输入类型用于创建一个用于搜索的文本输入框。普通按钮输入类型用于创建一个普通的按钮，通常用于触发 JavaScript 事件。范围输入类型用于创建一个滑块控件，用户可以通过移动滑块来选择一个值。密码输入类型用于创建一个密码输入框，其中输入的字符会被隐藏。
input输入框禁止修改的方法
09-12 3879
表单： <form action="form_action.asp" method="get"> <input type="text" name="fname" /> <input type="text" name="lname" disabled="disabled"/> <input type="submit" value="Submit" /...
ext 不能修改 输入框_在extjs中，如何用method改变textfield中inputType的问题
weixin_39997037的博客
12-19 251
items:[{xtype:'featureButtonIdCombo',listeners:{change:function(){vartype=this.getValue();if(type=='AUTHO')将xtype:'textfield'中inputType改为'password';else将xtype:'textf...items:[{xtype:'featureButtonIdCo...
react+antd：全局设置form表单不可编辑
superYe7的博客
08-29 1万+
在做编辑页面的时候遇到一个需求是“在指定状态下内容不可编辑” 方案一：给每个<Input>、<Select>...添加disable属性 这种方案在form表单内容比较多的情况下可能不是很方便，所以辜老师帮我想了方案二 方案二：封装个组件全局设置disable，如下 封装一个高阶组件( ./Input ) import React, { useContext, ...
表单禁用的几种方式
m0_52545254的博客
03-03 4387
1. 禁用一个带有输入字段的HTML表单，在html 里直接写禁用属性，[ disabled ] = " disabled ", disabled值在指定情况下设置成true就可以了。 2. 在表单验证的地方直接设置，name : [ { value: '', disabled: true }]。 3. 获取表单字段设置其禁用，this.form.get( 'name').disable()。但是此方法要注意在后面表单再赋值时要使用this.form.getRawValue()方法。直接赋值的话，获取不到.
jquery获取form表单input元素值的简单实例
10-22
在本篇内容中，我们将详细探讨如何使用jQuery来获取form表单中input元素的值，包括文本框、复选框、单选按钮等不同类型input元素的值获取方法。通过jQuery提供的val()方法和attr()方法，我们可以轻松获取或设置input...
Vue 处理表单input单行文本框的实例代码
10-17
在Vue.js框架中，处理表单输入，特别是单行文本框（`input[type="text"]`），是一项常见的任务。Vue提供了简洁且强大的数据双向绑定功能，使得与表单交互变得非常简单。本篇文章将深入探讨如何在Vue中使用v-model...
js光标定位文本框回车表单提交问题的解决方法
12-01
本文实例讲述了js光标定位文本框回车表单提交问题的解决方法。分享给大家供大家参考。具体分析如下： 当光标定位在辅助查找的文本框后回车，页面会出现方法的返回的json串。 原因：When there is only one single-...
js获取form表单所有数据的简单方法
10-21
通过`document.getElementById(formId)`获取对应的表单DOM对象，然后使用`getElementsByTagName('input')`方法收集该表单中所有的`<input>`元素，并将它们存储在数组`elements`中。函数最后返回这个数组。 接下来，...
ext 不能修改 输入框_#Ext.js 如何设置文本框不可编辑 #
weixin_31301993的博客
12-29 1254
#################Ext.js 怎么设置文本框不可编辑 #########代码如下，根据异议类型来设置退还资金，。如果异议类型为A，则退还资金这项只读，其他类型时可以编辑。varObjectionForm=newExt.FormPanel({frame:true,labelAlign:'right',labelWidth:90,width:200,heigh...
使input文本框不可编辑的3种方法
热门推荐
u010210251的博客
11-08 16万+
今天试了一下使input文本框不可编辑的3种方法，现在总结一下： disabled 属性规定应该禁用 input 元素，被禁用的 input 元素，不可编辑，不可复制，不可选择，不能接收焦点,后台也不会接收到传值。设置后文字的颜色会变成灰色。disabled 属性无法与 一起使用。 示例： readonly 属性规定输入字段为只读可复制，但是，用户可以使用Tab键切
Form表单禁止编辑和修改
q1054007919的博客
12-24 3330
//pointer-events: none; .oneForm { .ant-form { display: flex; pointer-events: none; } }
js 控制使FORM表单的的所有元素不可编辑
suzhangjun的专栏
10-16 4216
//使页面不可编辑     function disableOcx() {         var form = document.forms[0];         for ( var i = 0; i             var element = form.elements[i];             //部分元素可以编号     element.name  是元素自定义
Vue form绑定数据后只能显示不能编辑
爱洗澡的拉布拉多的博客
07-03 2189
问题描述： 数据绑定后form上，数据能够正常显示，像单选、下拉框等能操作，但是操作后，显示的值不变，页面自动更新后才能显示。 原因分析： 是因为在赋值的时候，没有在data中声明属性，如下面的代码： <script> export default { data () { return { formModel: {} } }, methods: { processFormData (val) { let s = JSON.parse(J
文本框/文本域，部分文字不可编辑（输入/删除等）。
qq_40639028的博客
08-09 3667
重点是要用到键盘删除事件@keydown.delete，通过该事件拿到input的e.target。如果在不能删除的区间，则阻止删除的事件@keydown.delete。以上还是存在bug，当正常输入字符发现没得问题，但当使用输入法进行文字字符等输入的时候，还是能正常的输入，因此需要再使用两个事件：@onCompositionStart输入法输入开始事件和@compositionend输入法输入结束事件。因此还需要键盘按下事件@keydown，当定位在1-7个字符之间时，阻止事件触发。......
bootstrap3中form表单中的input文本框怎么放置在一行
05-30
在Bootstrap 3中，可以使用内联表单类 `form-inline` 来让表单元素（包括 input 文本框）水平排列在同一行上。具体做法是： 1. 在 form 标签上添加 `class="form-inline"` 属性。 2. 在 input 标签上添加 `class="form-control"` 属性，使其样式与 Bootstrap 默认的表单样式一致。 3. 将 input 标签放置在一个带有 `class="form-group"` 属性的 div 元素中，以便正确控制表单元素的间距。 下面是一个示例代码： ```html <form class="form-inline"> <div class="form-group"> <label for="inputName">姓名：</label> <input type="text" class="form-control" id="inputName" placeholder="请输入姓名"> </div> <div class="form-group"> <label for="inputAge">年龄：</label> <input type="text" class="form-control" id="inputAge" placeholder="请输入年龄"> </div> <button type="submit" class="btn btn-default">提交</button> </form> ``` 这样，姓名和年龄两个输入框就会水平排列在同一行上了。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值