如何让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了，不然，看不到效果。

html中，select下拉框中是没有readonly这个属性的，只有disabled。但是用disabled就无法将下拉框中的数据读出来，所以要想办法将select下拉框设置成只读的。

将select下拉框设置成readonly 的两种办法。

第一种：<scriptvar f=s.selectedIndex</script

<select name=s onchange=selectedIndex=f

<option1 </option

<option selected2 </option

</select第二种：<span onmousemove=this.setCapture()onmouseout=this.releaseCapture()onfocus=this.blur()<select<option1 </option

<option selected2 </option

</select</span

其中onmousemove=this.setCapture()onmouseout=this.releaseCapture()屏蔽了鼠标事件，

onfocus=this.blur()屏蔽了键盘事件，onfocus=this.blur()表示该对象将获得焦点时就让它失去焦点，按键盘的TAB键时跳过它，使下一个控件获得焦点。

方法一： <input id= "File1" type= "text" disabled/>不可用

方法二： <input id=

"File1" type= "text" readonly/>只读

方法三： <input id= "File1" type=

"text" style="display:none"/>隐藏（但占位置）

方法四： <input id= "File1" type=

"text" style="visibility:hidden"/>隐藏（不占位置）

如使<input type="text" name="input1"

value="中国">的内容，"中国"两个字不可以修改。实现的方式归纳一下，有如下几种。

方法1:

onfocus=this.blur()

如：<input type="text" name="input1" value="中国" onfocus=this.blur()>

方法2:readonly

如：<input type="text" name="input1"

value="中国" readonly>或

<input type="text" name="input1" value="中国"

readonly="true">

方法3: disabled

如：<input type="text" name="input1"

value="中国" disabled>

---