开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

js设置input不能输入

在JavaScript中，如果你想设置一个<input>元素为不可输入状态，可以通过修改该元素的disabled或readonly属性来实现。

使用`disabled`属性

当设置disabled属性为true时，输入框将变灰，并且用户无法与之交互，同时该输入框的值也不会被提交到表单中。

<input type="text" id="myInput">

document.getElementById('myInput').disabled = true;

使用`readonly`属性

当设置readonly属性为true时，输入框仍然可以聚焦，但用户无法修改其内容。与disabled不同的是，readonly的输入框值会被提交到表单中。

<input type="text" id="myInput">

document.getElementById('myInput').readOnly = true; // 注意这里是 readOnly，不是 readonly（全小写）

应用场景

disabled：适用于当你不希望用户与某个输入框交互，并且该输入框的值不应该被提交到服务器时。例如，显示一个计算结果或者系统生成的值。
readonly：适用于当你希望用户能够看到一个值，但不应该修改它时。例如，显示一个订单号或者用户ID。

注意事项

使用disabled属性时，要确保其他表单元素仍然可以正常提交，因为disabled的输入框不会被包含在表单数据中。
使用readonly属性时，要注意样式上的区别，因为readonly的输入框通常不会像disabled那样变灰，可能需要额外的CSS来提示用户该字段是只读的。

示例代码

以下是一个完整的HTML和JavaScript示例，展示了如何通过按钮点击来切换输入框的disabled状态：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Input Disable Example</title>
<script>
function toggleDisable() {
    var input = document.getElementById('myInput');
    input.disabled = !input.disabled; // 切换disabled状态
}
</script>
</head>
<body>

<input type="text" id="myInput" value="This is a test input">
<button onclick="toggleDisable()">Toggle Disable</button>

</body>
</html>

在这个示例中，点击按钮会切换输入框的disabled状态，从而允许或禁止用户输入。

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

有帮助

没帮助

相关·内容

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

js对input框的可编辑属性设置

发布者：全栈程序员栈长，转载请注明出处：https://javaforall.cn/112370.html原文链接：https://javaforall.cn

8.3K5 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。...声明一个全局变量flag，设置为true 2. 添加compositionstart事件，在该事件执行时将flag设置为false 3....添加compositionend事件，在该时间执行时将flag设置为true 4. 添加onkeyup事件，在该事件执行时判断flag是否为true，如果为true，则执行搜索。...下面来看代码示例 input id="txt" type="text"> var flag = true; $('#txt').on('compositionstart'

8.2K2 0

input disabled不能提交表单

今天，在开发过程中发现一个问题，在提交form表单时，有一个input一直不能被提交，后台一直报错！究其原因，是因为该input上设置了disabled属性。...然而，有时我们又不得不设置某些元素为不可操作的，建议使用readonly替之。...如果一个输入项的disabled设为true，则该表单输入项不能获取焦点，用户的所有操作（鼠标点击和键盘输入等）对该输入项都无效，最重要的一点是当提交表单时，这个表单输入项将不会被提交。...readonly：只针对input(text / password)和textarea有效；如果设为true，用户只是不能编辑对应的文本，但是仍然可以聚焦焦点，并且在提交表单的时候，该输入项会作为form...在某个表单中为用户预填了某个唯一识别代码，不允许用户改动，但是在提交时需要传递该值，此时应该将它的属性设置为readonly。 2.

2.8K5 1

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

【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

871 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: #符合条件输出如下

7902 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禁止输入的方法

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 手机端无法输入

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 手机端无法输入

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

用户输入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

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

input file样式设置

需要提交input上传的文件等内容，所以需要form表单 HTML代码 input type="button" id="download" value="导出数据..." οnclick=""> input type="button" id="upbutton" value="上传">input type="file" id=...margin-right: 20px; width:100px; height:20px; float: right; margin-top:5px; } 浏览器显示去掉了input

1.9K1 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

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭