js文本框不能输入字符


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<script type="text/javascript">


//只能输入0-9的数字
function numbercheckKey(key) {

if(!(key>=96 && key<=105 || key>=48 && key<=57)){
event.returnValue=false;
}

var number = document.getElementsByName("number")[0].value;
if(number.length>9){
event.returnValue=false;
}

//这句话必须放到后面.不然的话得不到执行
if(key==8){
event.returnValue=true;
}
}

//可以输入小数类型的数字
function floatNumberCheck(key){
if(!(key>=96 && key<=105 || key>=48 && key<=57)){
event.returnValue=false;
}

var number = document.getElementsByName("floatNumber")[0].value;



if(key==110 || key==8){
event.returnValue=true;
}
}

function showHidde(){
obj = document.getElementsByName("checkbox")[0];
if(obj.checked==true)
{
document.getElementsByName("info")[0].style.display="block";
} else {
document.getElementsByName("info")[0].style.display="none";
}
}


function aa()
{
var va = confirm("是否提交");
if(va)
{
alert("提交了");
} else {
alert("取消了提交");
}
}

function change(value,del) {
//alert(del);
document.getElementById(del).style.color=value;
}
</script>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>无标题文档</title>

<style type="text/css">
<!--
.style2 {color: #993399}
-->
</style>
</head>

<body>
<form name="form1" method="post" action="">
<p>只能输入数字:
<input type="text" name="number" onKeyDown="numbercheckKey(event.keyCode)">
</p>
<p>可以输入小数:
<input name="floatNumber" type="floatNumber" onKeyDown="floatNumberCheck(event.keyCode)">
</p>
<p> </p>

<p>
<input type="checkbox" name="checkbox" value="checkbox" onclick="showHidde()">
请填写信息
</p>
<p>
<input type="text" name="info" style="display:none">
</p>
<p>
<input type="button" name="kk" value="确认窗体" onclick="aa()">
</p>
<p onmouseover="change('#993399','del1')" onmouseout="change('#FFFFFF','del1')" onmouseDown="change('#000000','del1')" ><span id="del1">变色给你看</span></p>

<p onmouseover="change('red','del2')" onmouseout="change('black','del2')" onmouseDown="change('blue','del2')" ><span id="del2">变色给你看2</span></p>
</form>
<p> </p>
</body>
</html>

### 实现 Vue 中文本框的禁用与只读 在 Vue.js 应用程序中,可以通过 `v-model` 和特定属性轻松控制输入框的状态。对于禁用和只读两种状态,分别有对应的属性可以使用。 #### 禁用输入框 当希望完全阻止用户交互时,可利用 `disabled` 属性: ```html <template> <div id="app"> <!-- 使用 v-bind 动态绑定 disabled --> <input type="text" v-bind:disabled="isDisabled" value="这是一个被禁用的输入框"/> <!-- 或者直接写死为 true 来静态定义 --> <input type="text" disabled value="这也是一个被禁用的输入框"/> </div> </template> <script> export default { data() { return { isDisabled: true // 控制变量决定是否启用禁用效果 } } } </script> ``` 此方法适用于所有类型的 `<input>` 元素[^1]。 #### 设置为只读模式 如果只是不让修改现有内容但允许复制粘贴,则应该采用 `readonly` 属性: ```html <template> <div id="app"> <!-- 同样支持动态绑定 readonly 属性 --> <input type="text" v-bind:readonly="isReadOnly" value="这是只读的输入框"/> <!-- 静态方式同样适用 --> <input type="text" readonly value="这同样是只读的输入框"/> </div> </template> <script> export default { data() { return { isReadOnly: true // 控制变量用于切换只读状态 } } } </script> ``` 上述例子展示了如何通过简单的布尔表达式来管理多个输入控件的行为[^4]。 另外,在更复杂的应用场景下,比如整个表单区域内的所有输入项都需要统一设为不可编辑的情况下,可以在包裹这些组件外层加上 `<fieldset>` 并应用相应的样式去除默认边框显示[^2]。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值