input输入框禁止输入但可以选择

最新推荐文章于 2024-03-06 11:12:03 发布
VIP文章 最新推荐文章于 2024-03-06 11:12:03 发布
阅读量3.2k 收藏 1
点赞数 1
分类专栏： vue 文章标签： vue elementui
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_57712926/article/details/119877151
版权

目录

前言

使用element框架开发后台管理系统时遇到一个问题，一个输入框不想用户输入内容，希望用户点击输入框后向后台发送一个请求，将请求回来的数据展示到树形组件中，用户点击树形结构中的节点可以将选中的值显示到输入框中。

一、需求

输入框只读，用户选择后将值显示到输入框内。
在这里插入图片描述

二、解决方案

1.方案一

给input输入框添加固有属性readonly即可，看了MDN介绍后，可以知道给输入框设置这个属性后，输入框就成为只读状态了࿰

最低0.47元/天 解锁文章
<a href="#">leo</a>
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Angularjs中的验证input输入框只能输入数字和小数点的写法（推荐）
10-19
主要介绍了Angularjs中的验证input输入框只能输入数字和小数点的写法,需要的朋友可以参考下
禁止input文本框输入实现属性
09-28
input文本框输入禁止在某些情况下是很有必要的，例子不胜枚举啊，接下来将为大家介绍下哪些属性可以做到，感兴趣的朋友可以参考下哈，希望可以帮助到你
使input文本框不可编辑的3种方法
热门推荐
纸短情长的博客
06-25 1万+
1：disabled 属性规定应该禁用 input 元素，被禁用的 input 元素，不可编辑，不可复制，不可选择，不能接收焦点,后台也不会接收到传值。设置后文字的颜色会变成灰色。disabled 属性无法与 <input type="hidden"> 一起使用。 示例：<input type="text" disabled="disabled" /> 2：readonl...
input 禁止输入特殊字符的四种实现方式
11-24
昨天项目搜索的时候报错，蛋疼的是生产库中的，看了下日志，原因是用户搜索的时候输入了特殊字符，没办法最快捷的办法是直接把用户输入的数据进行筛选，去掉特殊字符 有些特殊字符传入到后台是会产生错误的 有可能会sql注入，所以从根本上拦截 下面一起探讨下input禁止输入特殊字符的方式： 方式一：拿到value值以后 在你传递之前处理 function stripscript(value) { va
【uniapp】解决在H5谷歌浏览器，微信公众号H5 下 u-input 标签 设置只读readonly后,click事件不生效
最新发布
AAAXiaoApple的博客
03-06 530
【uniapp】解决在H5谷歌浏览器，微信公众号H5 下 u-input 标签 设置只读readonly后,click事件不生效
vue表单验证之禁止input输入框输入空格
01-18
测试小姐姐让输入框不允许输入空格，安排。  刚开始用的下面这个方法，因为我是电脑端f12的情况下调试移动端，所以下面这个方法可以实现禁止输入空格，于是就打包测试上线了，上线后才发现真机中不支持，应该是pc端和移动端事件不一样，所以如果你是pc端，可以使用下面这个方法。 input上添加下方代码（我用的vant也一样,包括elemenui等） @keydown.native=keydown($event) methods中写入下方代码 methods:{ // 禁止输入空格 keydown(e){ if(e.keyCode == 32){ e.returnValue
关于input不能输入的原因(最后一个很崩溃)
java_LittleBird的博客
07-15 3255
关于input不能输入的原因 ****1.设置了onkeydown属性 onkeydown="return false;" ****2.设置了readonly属性 readonly="readonly" ****3.input框自身设置font-size为0 <input type="text" style="font-size: 0px;width: 100px;height:30px;" /> 这种情况比较少见，但是有些时候，为了消除span元素之间的间隔会让font-size为0
ant Design Search无法输入内容
smile_68的博客
02-20 4150
我的问题：今天先根据手机号查询一个用户，根据文档引用Input中的Search，我添加了一个样式，发现输入框无法输入内容， 代码： return ( &lt;div&gt; &lt;Search style={{ width: 300, float: "right" }} placeholder="手机号...
elementUI 设置input的只读或禁用的方法
01-21
只读：readonly 在data里定义：readonly: true, 然后在input框里加上readonly就可以了。 禁用：disabled 在data里定义：edit: true, 然后在input框里加上：:disabled=”edit”就可以了 PS：下面看下elementui通过 disabled 属性指定是否禁用 input 组件，如何用DOM操作取消disabled 属性 <!DOCTYPE html> <html lang=en> <head> <meta charset=UTF-8> <meta name=viewport content
ant design vue 的 input组件 不能输入但可以选择
m0_60666754的博客
01-09 683
1.如下图，设置了只读性，只能选择放大镜，但不能输入文字（readOnly ）注意：readOnly 的O要大写。
antd input组件，获取焦点时更改该组件的样式
逆风优雅的博客
01-21 3920
1. 首先给该组件注册一个失去焦点的事件 <a-input-search placeholder="请输入搜索产品名称" class="header_input" @search="onSearch" @focus="focusSearch" @input="searchValue" v-model="searchText" ref="a_input_se
让input不可输入但可选择和禁止使用状态
lxtlog的博客
11-17 3717
//不可输入但可选择     //禁止使用状态
实现点击文本框不能输入文字，但可以点击选择赋值(有光标，多种方法)
fortune丶的blog
07-30 1499
场景: 禁止用户点击输入文本框、但是点击文本框可以弹出弹框选择内容赋值给文本框 以下是我的办法以及尝试过的办法，选出来最佳的符合场景的方法 方法1：给input加属性 readonly：没有光标                 dis...
ios中设置input输入框type属性为search的时候，在ios中不生效
weixin_30254435的博客
05-28 760
ios中设置input输入框type属性为search的时候，在ios中不生效，解决方法外层套一层form标签需要阻止表单的提交事件 <form action="" @submit.prevent=""> <span></span> <span class="search-icon"></span> <inpu...
ios input 的type为search不显示搜索按钮
weixin_43110440的博客
06-30 516
ios使用input的搜索需要在input外面添加
上次同学说写搜索表单号要显示请输入，但是点击输入就点搜索，输入框的值是空的，点击输入框表单号消失，自己试了下
zbz0425的专栏
08-31 1716
String path = request.getContextPath();  String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";  %>                ">            My JSP 'ind
解决 iphone 下面 input type="search" 弹出虚拟键盘 不能显示 搜索 问题
qq316895454的专栏
12-30 6463
form action="javascript:return true;">                        input name= "seach" type ="search"  placeholder="" id="seach" />             form> 在 input 外面包裹一层form
input输入框可以选择但是禁止不可以输入
wo_ai_ni___的博客
12-08 1509
<input type="text"disabled="disabled" value="text"> 禁止使用状态 <input type="text"readonly="readonly" value="text"> 不可输入但可选择 更多资料请查看本人博客
input元素禁用了之后，点击事件是不会触发，禁用状态下也能触发点击事件或其他事件的办法
菜鸡的博客
09-14 3075
你可以使用CSS来模拟禁用状态的外观，而不实际禁用输入元素。这样，元素看起来像是禁用的，但仍然可以触发事件。你可以在禁用的输入元素上添加一个透明的覆盖层，以阻止用户点击它，但允许点击覆盖层上的内容。属性）时，该元素不会触发任何点击事件或其他交互事件。这是HTML规范的一部分，用于表示该输入元素处于不可交互状态，用户不能与其进行交互或触发任何事件。请根据你的需求选择适当的方法，以实现在禁用状态下触发事件。前两种方法需要一些自定义的样式和事件处理，但可以满足特定的交互需求。在HTML中，当一个。
input输入框禁止输入
10-19
好的，我明白了。对于你的问题，我可以给出...2. 使用JavaScript来禁用input输入框，例如： ```javascript document.getElementById("inputId").disabled = true; ``` 其中，"inputId"是你要禁用的input输入框的id。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值