js设置input为只读

在JavaScript中，将<input>元素设置为只读可以通过修改其readOnly属性来实现。以下是相关的基础概念、优势、类型、应用场景以及如何设置和解决问题的详细说明：

基础概念

readOnly属性是一个布尔值，当设置为true时，用户无法修改输入框的值，但仍然可以通过Tab键聚焦并获得焦点。

优势

数据保护：防止用户意外修改重要数据。
用户体验：在某些情况下，显示信息但不允许编辑可以提高用户体验。
表单验证：在某些情况下，可能需要先显示计算结果或预填充数据，然后再进行提交。

类型

readOnly属性只有两种状态：

true：输入框为只读状态。
false：输入框可编辑状态。

应用场景

显示计算结果：在用户输入数据后，显示计算结果但不允许修改。
预填充数据：从服务器获取数据并显示在输入框中，但不允许用户修改。
表单部分锁定：在某些表单中，可能需要锁定部分字段以防止用户修改。

如何设置

可以通过JavaScript直接设置readOnly属性，也可以在HTML中直接设置。

通过JavaScript设置

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Set Input ReadOnly</title>
</head>
<body>
    <input type="text" id="myInput" value="Hello World">
    <button onclick="setReadOnly()">Set ReadOnly</button>

    <script>
        function setReadOnly() {
            document.getElementById('myInput').readOnly = true;
        }
    </script>
</body>
</html>

通过HTML设置

<input type="text" value="Hello World" readOnly>

常见问题及解决方法

只读输入框仍然可以聚焦：这是正常行为，只读输入框仍然可以获得焦点，但无法编辑内容。
样式问题：只读输入框可能会有不同的样式，可以通过CSS进行调整。
样式问题：只读输入框可能会有不同的样式，可以通过CSS进行调整。
表单提交问题：只读输入框的值会随表单一起提交，如果不需要提交，可以使用disabled属性，但需要注意disabled状态的输入框不会随表单提交。

总结

通过设置readOnly属性，可以轻松地将输入框设置为只读状态，保护数据不被修改，同时保持良好的用户体验。根据具体需求，可以选择在JavaScript中动态设置或在HTML中直接设置。

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

有帮助

没帮助

AngularJS，当是真的时，我怎样才能禁用ng模糊？

、

我正在使用AngularJS，当将ng模糊和ng只读混合时，遇到了一个问题。即使ng-readonly设置为true，ng-blur仍会触发(如果单击输入字段，则单击别处)。在app.js中 $scope.count++;在index.html中ng-blur="counting()"ng-readonly="true&q

浏览 3提问于2015-07-04得票数 3

回答已采纳

1回答

在不使用命令行的情况下使Node.js ftp-srv为只读

、

在ftp-srv模块中，有一个命令行可以将Node.js服务器设置为只读，但是如何通过Node.js代码将服务器设置为只读？

浏览 23提问于2021-08-15得票数 1

回答已采纳

1回答

如何将DataTables pagingType:input属性设置为只读？

、、

我想知道是否有办法将DataTables输入属性设置为只读，我希望显示页码，但不希望用户更改页码。table = $('#esignTable').DataTable({"sDom": '<"top"flp>rt<"bottom"i><"clear">', sLast: &

浏览 22提问于2017-06-30得票数 1

回答已采纳

2回答

在javascript中将输入设置为只读

、、

我目前正在尝试创建一个JS方法，如果另一个字段中包含值，它会将一个特定的输入字段设置为只读，但我在使其正常工作时遇到了问题。$(document).ready(function(){ priceInputs.change(function(){ $(this).parents(&#x

浏览 14提问于2021-05-26得票数 0

3回答

CodeIgniter: form_input为只读

、

php echo form_input(array('name'=>'stockist['.$stockist->ID.']>谢谢

浏览 1提问于2016-01-12得票数 1

回答已采纳

1回答

更改输入字体颜色时出现只读问题

、、、、

由于它被禁用时是灰色的，所以我希望它显示为黑色。因此，我尝试使用readonly，但它不起作用，现在输入不能显示它应该显示的内容。它只是说对象对象。这是我的HTML和TS代码。可能的问题是什么？"> <input

浏览 2提问于2021-04-01得票数 0

3回答

使用JS将输入设置为只读

、

我很抱歉，如果这是一个非常简单的错误，我找不到答案，我只是刚刚开始从JS。<!white; font-size:30px}<script> var x = document.getElementsByTagName("inputtype="number" name="Price"> &

浏览 6提问于2016-04-12得票数 2

回答已采纳

1回答

如何在onSearch上将antd input.search设置为只读

、

我正在尝试禁用，或者更好的做法是，在用户单击search之后，使我的input.search组件的内容不可编辑。<Input.Search enterButton={inProgress ?

浏览 119提问于2020-02-09得票数 0

回答已采纳

3回答

无法将输入文本字段设置为只读angular 6

、

我的要求是基于值将文本字段设置为只读。我试过两种方法，都失败了。以下是我的代码。使用ngClass<input type="text" [ngClass]="{inputDisabled : data ?<input [readonly]="data.name === ''?true:false" type="text" value={{data.name}} >

浏览 1提问于2019-03-18得票数 2

1回答

如何用zombie.js和node.js测试只读输入

、、

我想在我的摩卡测试中使用browser.assert和zombie.js。如何为引导输入字段选择/测试只读标志(我使用input.form-control(name="OSMUser",id="OSMUser",value = "test" readonly) ) Zombie.js确实忽略了标记(这样我就可以填充textfield，而它应该是只读的)，所以我假设，我必须测试是否设置了标志。

浏览 3提问于2016-03-08得票数 0

回答已采纳

1回答

Textbox readonly属性在datatime选择器的实现过程中使整个组成为只读

、、

<div class="input-group date" data-provide="datetimepicker1"> <span

浏览 17提问于2019-03-02得票数 0

回答已采纳

1回答

AngularJS -概念理解视图问题(ng-if，ng-switch)

输入字段如下所示： <input type="text" ng-model='vm.tender.view'

浏览 15提问于2019-02-02得票数 0

回答已采纳

2回答

具有只读属性的<input>无法打开小部件

、、

我正在尝试使用并尝试将输入字段设置为只读，但即使日期选择器按钮被禁用，我也无法打开日期选择器小部件 <div class="row"><div class='col-sm-6'> <div class='input-gro

浏览 36提问于2018-06-22得票数 0

3回答

在JavaScript中将文本输出到输入字段

、

该函数是在按下输入字段时将文本"x“输出到输入字段，该字段设置为只读。只有js和html允许。以下是我到目前为止在HTML和js中取得的成果： <input id="printoutput

浏览 1提问于2018-10-16得票数 2

回答已采纳

1回答

将所有UI表单设置为只读/禁用？

、、、

我们有一个需求，当用户访问被设置为readonly时，需要将所有表单输入元素设置为“只读”。var item=dojo.query("#showtech_log_title_pane"); // id of the content pane} 错误: dijit由id->

浏览 1提问于2017-01-10得票数 1

4回答

如何将同一个类的多个文本框上的只读属性设置为false？

、、、

我有以下三个控件，它们都具有相同的类，名为"txt11“，每当单击”编辑“按钮时，我都希望将所有三个文本框的只读属性更改为false。});<input rea

浏览 5提问于2016-11-29得票数 3

回答已采纳

1回答

Javascript:正则表达式或其他一些控制只读输入的技术

、、

我已经用html构建了我的计算器，并将输入设置为只读，以便与Windows的类似。现在，我知道您可以通过创建适当的正则表达式来控制基本输入，但是对于只读，情况是否如此？我试着设置无数的变量，并用if/switch语句控制它们，但它花了我大约100行代码，很快就成了控制的噩梦，所以我从头开始寻找替代方案，如果我了解到的关于JS的东西是真的，这是可能的。请只使用纯JS，不要使用其他库。下面是我当前的JS代码：

浏览 19提问于2018-06-14得票数 0

2回答

如何使用Enter或Escape键将输入元素转换为只读

、、

默认情况下，我将<input>元素设置为只读：如果用户双击此元素，则将其设置为readonly')==true) { element.prop('readonly', false);} else { element.prop('read

浏览 1提问于2016-12-01得票数 0

回答已采纳

3回答

在文件输入上使用v-model时出错

、

我尝试将空值设置为v-model，但它生成了以下错误 <input id="fileupload" type="file" v-model="file" multiple v-on:change="uploadFile" ref="fileInput" /> 如何在上传后清除vue.js中的文件输入，以便能够连续多次上载同一文件

浏览 7提问于2017-06-05得票数 6

回答已采纳

4回答