html中输入框为只读状态如何设置

在设计网页时，有时需要将输入框设置为只读状态，即其中的内容不可编辑，实现这种设计的方法有两种：

使用input的disable和readonly两个属性。

先来看下二者的区别：

<input type= "text " readonly= "true " value= "这是readonly的！ ">

<input type= "text " disabled= "true " value= "这是disabled的！ ">

可以看到，虽然两种都是让input的内容不能被用户编辑，但是对于后期的美工处理就有问题了！

例如：

​<style>

input

{

color:blue

}

</style>

只有readonly的那个文本是蓝色的！

disabled是按系统设置的disabled颜色来设置前景色的，css对其无效！

另外，readonly和disabled还有一个不同点就是，当input属性为readonly时，提交表单是可以获得input的内容。

如果是disabled则不能获得所提交的内容，返回值全部为null，所以此处需要注意。

慎用readonly和disabled，指定了disabled的表单，在submit时，不会把它的值传出去。

例如，有两个text，一个是readonly一个是disabled，submit后，只能发送那个不是disabled的。

注意地址栏的值. 要保存到本地，因为submit了，不然，看不到效果。

你只需要修改文本域的innerHTML就好啦，

<script>

window.onload = function () {

var data = '表单数据'

var oTextarea =  document.getElementById('content')

oTextarea.innerHTML = data

}

</script>

input禁止输入的方法：

1、readonly 规定输入字段为只读可复制，但是，用户可以使用Tab键切换到该字段，可选择,可以接收焦点，还可以选中或拷贝其文本。

<input type="text" value="哈哈哈" readonly="readonly">

2、disabled 被禁用的 input 元素可复制，不能接收焦点,设置后文字的颜色会变成灰色。无法与 <input type="hidden">一起使用。

<input type="text" value="哈哈哈" disabled="disabled">

---