开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

js 让input不能输入

在JavaScript中，如果你想让<input>元素不能输入，可以通过设置其disabled属性或readonly属性来实现。以下是这两种方法的基础概念、优势、类型、应用场景以及示例代码：

基础概念

disabled 属性：
- 当一个表单元素被标记为 disabled 时，该元素及其值不会被提交至表单。
- 用户无法与该元素交互。

readonly 属性：
- 当一个表单元素被标记为 readonly 时，用户仍然可以聚焦该元素并查看其内容，但不能编辑。
- 元素的值会被提交至表单。

优势

安全性：防止用户修改关键数据。
用户体验：明确指示某些字段不可编辑，避免用户尝试操作。

类型

禁用状态（disabled）：完全不可用，不可聚焦，不可复制。
只读状态（readonly）：可聚焦，可复制，但不可编辑。

应用场景

disabled：适用于提交按钮在特定条件下不可用的情况，或者表单字段在数据处理期间需要保持不变的情况。
readonly：适用于需要显示但不允许用户更改的信息，如身份证号码、出生日期等。

示例代码

使用 disabled 属性

<input type="text" id="myInput" value="This is disabled">
<script>
  document.getElementById('myInput').disabled = true;
</script>

使用 readonly 属性

<input type="text" id="myInput" value="This is read-only">
<script>
  document.getElementById('myInput').readOnly = true;
</script>

解决问题的方法

如果你遇到了<input>元素仍然可以输入的问题，可能是因为：

属性拼写错误：确保使用的是正确的属性名（disabled 或 readOnly）。
JavaScript执行顺序：确保脚本在DOM元素加载完成后执行。可以将脚本放在<body>标签的底部，或者使用window.onload事件。
CSS样式覆盖：某些CSS样式可能会影响元素的交互性，检查是否有样式规则意外地使元素可编辑。

检查和修复步骤

检查属性拼写：
检查属性拼写：
确保DOM加载完成：
确保DOM加载完成：
审查CSS样式：确保没有样式规则如 pointer-events: none; 被错误地移除或覆盖。

通过以上方法，你可以有效地控制<input>元素的输入状态，并解决可能出现的任何问题。

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

python Input输入

= input("salary:") 8 9 #raw_input 2.x = input 3.x 10 #input 2.x = 11 12 13 info2 = ''' 14 -----...asdhu ------- Name:asdhu Age:sdva Job:afvasfv Salary:afsdvav Process finished with exit code 0 age：输入数字类型转换字符串类型...age),type(str(age))) 6 job = input("job:") 7 salary = input("salary:") 8 9 #raw_input 2.x = input...7 salary = input("salary:") 8 9 #raw_input 2.x = input 3.x 10 #input 2.x = 11 12 13 info2 = '''...7 salary = input("salary:") 8 9 #raw_input 2.x = input 3.x 10 #input 2.x = 11 12 13 info2 = '''

1.6K2 0

input输入框的input事件

首先是一个坑，在IE和360浏览器中页面刷新会执行一遍input事件，在其他浏览器就没有，所以会有很大问题，导致做的自动补全列表直接显示，刷新页面也不能隐藏。...input type="text" class="comHeaderBanSearchSearch fl" placeholder="请输入关键字查询" v-model="inputVal" @keyup.enter

3.6K3 0

input各种输入验证

限制输入框只能输入数字，并且保留两位小数 input type="text" onkeyup="var p2 = parseFloat(value).toFixed(2);value = p2>=0?...可以修改为，如小于100 input type="text" onkeyup="var p2 = parseFloat(value).toFixed(2);value = p2>=0&&p2 如果保留一位小数可以 input

1.1K5 0

Unity的Input输入

Unity中的输入管理器由Input类进行操控。.../Input.html 这里只说几个易混淆的点。...而Button是输入管理器 InputManager所定义的虚拟器，它通过名称来访问。怎么理解，先看下图。...Input 的设置可以通过 Edit –> Project Settings –> Input打开面板 ? 如果我需要判断是否进行了跳跃（Jump），可以在代码中这样写。...if (Input.GetButtonDown("Jump")) { Debug.Log("Input Button Down Jump."); } 运行，当按下空格键，控制台就会输出“Input

2.1K2 0

input输入中文时，拼音触发input事件

在上一篇文章中写到了函数防抖，在使用函数防抖来进行搜索框优化的时候会遇到一个问题，就是监听文本输入框的input事件，在拼写汉字（输入法）但汉字并未实际填充到文本框中时会触发input事件，会出现下图的效果...这是我们不希望看到的，我们希望得到的效果是汉字输入进去以后再触发事件。通过查询，我发现input有两个事件：compositionstart和compositionend。...来看一下关于两个事件的介绍： compositionstart：事件触发于一段文字的输入之前（类似于 keydown 事件，但是该事件仅在若干可见字符的输入之前，而这些可见字符的输入可能需要一连串的键盘操作...个人可以理解为输入拼音状态开始执行的事件 compositionend：当文本段落的组织已经完成或取消时，会触发该事件。这个个人可以理解为输入拼音结束，按下空格将汉字输入完成以后执行的事件。...下面来看代码示例 input id="txt" type="text"> var flag = true; $('#txt').on('compositionstart'

8.2K2 0

input disabled不能提交表单

今天，在开发过程中发现一个问题，在提交form表单时，有一个input一直不能被提交，后台一直报错！究其原因，是因为该input上设置了disabled属性。...一、readonly & disabled区别 readonly和disabled是用在表单中的两个属性，它们都能够做到使用户不能够更改表单域中的内容。...如果一个输入项的disabled设为true，则该表单输入项不能获取焦点，用户的所有操作（鼠标点击和键盘输入等）对该输入项都无效，最重要的一点是当提交表单时，这个表单输入项将不会被提交。...readonly：只针对input(text / password)和textarea有效；如果设为true，用户只是不能编辑对应的文本，但是仍然可以聚焦焦点，并且在提交表单的时候，该输入项会作为form...2. disabled和readonly的文本输入框只能通过脚本进行修改value属性。

2.8K5 1

【Matlab】input 请求用户输入

功能 input——请求用户输入，即允许程序和人之间进行交互。用法 prompt = 'What is the original value?...'; x = input(prompt) prompt 是指向用户展示的文本。显示 prompt 中的文本并等待用户输入值后按回车键。...txt = input(prompt,"s") 返回输入的文本"s"，不会将输入作为表达式来计算。示例 1.请求数值输入或表达式输入。...% 请求数值输入 prompt = "What is the original value? "; x = input(prompt) y = x*10 输入数值（如12），返回120。..."; x = input(prompt) y = x*10 输入magic(3)，返回如下： 2.请求未处理的文本输入请求文本响应（如条件语句Y/N） prompt = "Do you want more

861 0

python编程 input输入函数

座右铭：低头赶路，敬事如仪个人主页：网络豆的主页目录前言一.输入与输出 1.input输入函数 2注意点① 3注意点② 二.input输入函数小练习 1.小练习示例子代码...2.思考① 3.思考② ---- 前言本章将会讲解输入与输出中的 input（）输入函数 ---- 一.输入与输出 1.input输入函数 input（）是内置函数，用来获取用户输入，返回值为字符串。...例： # input输入函数 age = input("请输入年龄") #将input整体赋值给age print(age) #运行他会在控制台等待用户输入内容...②input（）阻塞 ---- 二.input输入函数小练习输入年龄当年龄大于18，则输出“你好呀，靓仔；否则输出“你好呀！...# 输入年龄 age = input("请输入年龄：") #当年龄>18 #字符串不能与数值直接比较，我们现在要将字符串强转为整数 #使用int（） if int(age) > 18: #符合条件输出如下

7892 0

input()输入函数怎么使用

在编程语言中有输出就有输入，下面我们就来看看input()输入函数，还是老规矩先看看输入函数的构造。...def input(*args, **kwargs): # real signature unknown """ Read a string from standard input. ...The prompt string, if given, is printed to standard output without a trailing newline before reading input...下面我们就来演示一下： c = 'python自学网' aa = input(c)print(aa) 返回结果： 1.png 先打印的是python自学网，然后继续输入dd之后按回车键，又输出dd，是因为...下面在看一个案例： bb = input('请输入你的年龄：') print(bb) 返回结果： 2.png 输入后回车的结果： 3.png

2K2 0

input输入框输入数据查询

在input输入框输入数字的时候，会展示data.json里面的数据，当删掉input输入框输入数字的时候，隐藏出现的data.json数据列表。 js..."> js/bootstrap.min.js"...form-group" style="margin-top: 10px;"> input...id="search" type="text" class="form-control input-medium" placeholder="姓名" /> </

2K3 0

input 手机端无法输入

input标签添加style=“-webkit-user-select: auto;” $(function(){ //$('input').focus(focustext).../*******用以下三行代码即可实现*******/ $('input').click(function(){ this.selectionStart = 0; this.selectionEnd...= this.val().length; }) }) function focustext() { var input = this; setTimeout(function()...{ input.selectionStart = 0; input.selectionEnd = input.val().length; }, 100) } 发布者：全栈程序员栈长

1.8K2 0

input禁止输入的方法

1. readonly 规定输入字段为只读可复制，但是，用户可以使用Tab键切换到该字段，可选择,可以接收焦点，还可以选中或拷贝其文本。...input type="text" value="test" readonly="readonly"> 2. disabled 被禁用的 input 元素可复制，不能接收焦点,设置后文字的颜色会变成灰色...无法与 input type="hidden"> 一起使用。 input type="text" value="test" disabled="disabled"> 3. ...通过控制input的max length为0实现 input type="text" maxlength="0"> 4. οnfοcus="this.blur();" onfocuse是聚焦的意思，...当你把光标放在文本框上输入的时候，就是聚焦，但这里添加了"this.blur()"，blur的作用就是去除聚焦，也就是你不能把光标放在这个文本框上，换句话说就是你不能输入文本了 input type

2.6K5 1

用户输入input＆int

1、input（）：让程序暂停，等待用户输入一些文本，获取用户输入后再执行下一行代码，例如： car = input("请问你需要租什么样的车：") print("让我看一看，能不能给你找一辆" +...运行上述代码后首先看到的内容为请问你需要租什么样的车：当用户输入内容后才会执行print语句，比如说我们输入一个“斯巴鲁”则输入如下：请问你需要租什么样的车：斯巴鲁让我看一看，能不能给你找一辆斯巴鲁...2、int（）：在需要数值对比时需要用到int（）函数，他能让你输入的数字字符串转换为数值进行对比，例如： age = input("请输入你的年龄： ") if age >= 18: print("你已经成年了...这个时候我们就需要int（）函数了： age = input("请输入你的年龄： ") age = int(age) if age >= 18: print("你已经成年了") else: print(..."你是未成年人") 结果如下：请输入你的年龄： 18 你已经成年了

9610 0

PHP输入流php:input

PHP输入流php://input 在使用xml-rpc的时候，server端获取client数据，主要是通过php输入流input，而不是$_POST数组。...所以，这里主要探讨php输入流php://input 对一php://input介绍，PHP官方手册文档有一段话对它进行了很明确地概述。...php://input不能用于enctype=multipart/form-data” 我们应该怎么去理解这段概述呢?! 我把它划分为三部分，逐步去理解。..._POST与php://input存在哪些关联与区别呢?另外，客户端向服务端交互数据，最常用的方法除了POST之外，还有GET。既然php://input作为PHP输入流，它能读取GET数据吗？...也就是php://input数据和$_POST数据不一致了。我们再来看看通过GET方法提交表单数据的情况，php://input能不能读取到GET方法的表单数据？

13.5K1 0

input 手机端无法输入

input标签添加style=“-webkit-user-select: auto;” $(function(){ //$('input').focus(focustext).../*******用以下三行代码即可实现*******/ $('input').click(function(){ this.selectionStart = 0; this.selectionEnd...= this.val().length; }) }) function focustext() { var input = this; setTimeout(function()...{ input.selectionStart = 0; input.selectionEnd = input.val().length; }, 100) }

1952 0

如何限制input输入类型

1.只能输入和粘贴汉字 input onkeyup="value=value.replace(/1/g,'')" onbeforepaste="clipboardData.setData('text...this.value.replace(/\D/g,'')" /> 3.数字脚本 input onkeyup="if(/D/.test(this.value)){alert('只能输入数字...');this.value='';}"> input onkeyup="if(/\D/.test(this.value)){alert('只能输入数字');this.value='';}">...input style="ime-mode:disabled">输入法不转换，但可粘贴上 input style="ime-mode:disabled"> 6.输入数字和小数点 input...\d{1,}|\d{1,}]/g,'')" /> 7.只能数字和"-",例如在输入时间的时候可以用到 input onkeyup="value=value.replace(/5|_/ig

2.4K7 0

js通过input框输入属性和值，改变div的属性

js实现在input框里面输入属性和值，页面的 div的属性根据输入的属性和值进行变化。 ? <!...display:inline-block;/*行内块元素*/ text-align:right;/*文本右对齐*/ } input..."); //获取input元素的引用 oBtn[0].onclick = function () { //给确定按钮添加事件 changeStyle...属性值：input type="text" value="" /> 确定重置在上方输入框输入"属性名"及"属性值"，点击确定按钮查看效果。

15.8K5 0

【js】Input事件

Input Event常用事件触发的先后顺序如下： 1 keydown 2 keypress 3 textInput 4 input 5 keyup keydown，keyup 1 全部浏览器支持 2...event.keyCode，返回键盘上按键对应的ASCII码（IE8-，Opera） textInput 1 IE9+，Chrome，Safari支持，别的浏览器不支持 2 在文本插入文本框之前触发，便于检查拦截用户输入使用...3 在input:text，input:password，input:search，textarea以及元素是contentEditable模式时支持触发此事件 4 event.data，返回用户输入的文本...（如果按键是s，那么返回s；如果按键是s+Shift，那么返回S） 5 IE9中事件名为textinput（全小写，其它浏览器中I需要大写） input 1 IE9+，Firefox，Chrome，...Safari，Opera支持 2 在内容变化时，实时触发 3 在input:text，input:password，input:search，textarea支持触发此事件，在内容变化时，实时触发（

10.3K3 0

vue input输入框联想

最后是效果图，其实也挺简单的，主要是用了watch监控input输入值的变化，如果数据是请后端请求可以，先请求数据。... input...solid red; } li{ height:40px; line-height: 40px; border-bottom: 1px solid #ddd; } .bindingbtn input

2.6K5 0

PHP输入流php:input介绍

在使用xml-rpc的时候，server端获取client数据，主要是通过php输入流input，而不是$_POST数组。...所以，这里主要探讨php输入流php://input 对一php://input介绍，PHP官方手册文档有一段话对它进行了很明确地概述。...php://input不能用于enctype=multipart/form-data” 我们应该怎么去理解这段概述呢?!我把它划分为三部分，逐步去理解。...读取POST数据不能用于multipart/form-data类型 php://input VS $HTTP_RAW_POST_DATA 读取POST数据 PHPer 们一定很熟悉$_POST...既然php://input作为PHP输入流，它能读取GET数据吗？这二个问题正是我们这节需要探讨的主要内容。经验告诉我们，从测试与观察中总结，会是一个很凑效的方法。

2.2K5 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭