html表单文本框只读不可编辑多种方法

发布时间:2020-11-04编辑:脚本学堂
有关html表单中设置文本框只读的多个方法,以及html文本框代码的详细教程,html文本框属性与例子,需要的朋友参考下。

在html页面表单中设置文本框只读,不能修改其中的信息,如使<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>

附,常用的html文本框代码

搜集一些关于html文本框代码

1、用户在文本框中输入字母,程序在其上方能实时反映用户输入。
 

复制代码 代码示例:
<html>
<body>
<div id="txtre" style="height:20px;"></div>
<input type=text id="txtuser" onkeyup="javascript:document.getElementById('txtre').innerHTML=this.value;">
</body>
</html>

2、网页上有一段英语文本,用户在文本框输入给定的文本,程序负责校验输入的正确性,并将输错的字符设为红色.
 

复制代码 代码示例:
<html>
<head>
<script>
function checkword(tobj,dobj){
var val=document.getElementById('txtre').innerHTML;
var wor=tobj.value;
wor=wor.replace(/(^s*)|(s*$)/g,"");
var newval="";
for(var ii=0;ii<val.length;ii++){
var oneword=val.substring(ii,ii+1);
if(ii<wor.length){
if(oneword==wor.substring(ii,ii+1)){
newval+="<font color='green'>"+wor.substring(ii,ii+1)+"</font>";
}else{
newval+="<font color='red'>"+wor.substring(ii,ii+1)+"</font>";
}
}
}
dobj.innerHTML=newval;
}
</script>
</head>
<body>
<div id="txtre" style="height:20px;">hello!my name is lc.</div>
<div id="txtsr" style="height:20px;"></div>
<input type=text id="txtuser" onkeyup="checkword(this,document.getElementById('txtsr'))">
</body>
</html>

html文本框代码
<textarea></textarea>用来创建一个可以输入多行的文本框,此标志对用于<form></form>标志对之间。

<textarea>属性:
(1)onchange指定控件改变时要调用的函数
(2)onfocus当控件接受焦点时要执行的函数
(3)onblur当控件失去焦点时要执行的函数
(4)onselect当控件内容被选中时要执行的函数
(5)name这文字区块的名称,作识别之用,将会传及 CGI。
(6)cols这文字区块的宽度。
(7)rows这文字区块的列数,即其高度。
(8)wrap属性 定义输入内容大于文本域时显示的方式,可选值如下:
*默认值是文本自动换行;当输入内容超过文本域的右边界时会自动转到下一行,而数据在被提交处理时自动换行的地方不会有换行符出现;
*Off,用来避免文本换行,当输入的内容超过文本域右边界时,文本将向左滚动;
*Virtual,允许文本自动换行。当输入内容超过文本域的右边界时会自动转到下一行,而数据在被提交处理时自动换行的地方不会有换行符出现;
*Physical,让文本换行,当数据被提交处理时换行符也将被一起提交处理。
这里列与行是以字符数为单位的。

例子:
 

复制代码 代码示例:
<html>
<head>
<title>多行的文本框</title>
</head>
<body>
<form action="" method="post">
<p>您的意见对我很重要:
<textarea name="yj" clos="20" rows="5">
请将意见输入此区域
</textarea>
</body>
</html>