JavaScript 如何使得文本框Text中的前几位不能修改或删除呢？
展开全部
大概有这么3种做法，你参考一下吧。用得较多的是第二和第三种
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Tilte</title>
</head>
<style type="text/css">
input {
margin: 0;
padding: 0;
}
li {
line-height: 2em;
}
#vor {
border-right: none;
width: 70px;
}
#nach {
border-left: none;
margin-left: -8px;
}
#back {
border: none;
border-bottom: 1px dashed black;
}
</style>
<body>
<ol>
<li>两个文本框
<input type="text" id="vor" value="ChinaNet-" readonly="readonly" />
<input type="text" id="nach" />
</li>
<li>文本+文本框
<ul>
<li>普通
<span>ChinaNet-</span>
<input type="text"/>
</li>
<li>美化
<span>ChinaNet-</span>
<input type="text" id="back" />
</li>
</ul>
</li>
<li>一个文本框+javascript
<input type="text" id="js-control" value="ChinaNet-"/>
</li>
</ol>
</body>
<script type="text/javascript">
var textField = document.getElementById('js-control'), //获取表单域
startText = textField.value; //获取开头字符串
textField.onkeyup = function(){
//如果不是以startText开头的，就把文本框内的值设为startText
(textField.value.indexOf(startText)===0) || (textField.value = startText);
};
</script>
</html>
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Tilte</title>
</head>
<style type="text/css">
input {
margin: 0;
padding: 0;
}
li {
line-height: 2em;
}
#vor {
border-right: none;
width: 70px;
}
#nach {
border-left: none;
margin-left: -8px;
}
#back {
border: none;
border-bottom: 1px dashed black;
}
</style>
<body>
<ol>
<li>两个文本框
<input type="text" id="vor" value="ChinaNet-" readonly="readonly" />
<input type="text" id="nach" />
</li>
<li>文本+文本框
<ul>
<li>普通
<span>ChinaNet-</span>
<input type="text"/>
</li>
<li>美化
<span>ChinaNet-</span>
<input type="text" id="back" />
</li>
</ul>
</li>
<li>一个文本框+javascript
<input type="text" id="js-control" value="ChinaNet-"/>
</li>
</ol>
</body>
<script type="text/javascript">
var textField = document.getElementById('js-control'), //获取表单域
startText = textField.value; //获取开头字符串
textField.onkeyup = function(){
//如果不是以startText开头的，就把文本框内的值设为startText
(textField.value.indexOf(startText)===0) || (textField.value = startText);
};
</script>
</html>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
给你一个思路百分百可以，我以前做成功能过。
1、给input表单设置背景，背景图片中有你不能修改或删除的文字，即一个图片式的文本框，文本框里面的左边有你的固定文字。
2、将你的文本框边框宽度设置为0。
3、将文本框里可输入的文字设置向右偏移N个像素（像素数取决于你的文字长度），CSS里有这个属性找一下，以前做过的不想再去翻以前的资料了。
1、给input表单设置背景，背景图片中有你不能修改或删除的文字，即一个图片式的文本框，文本框里面的左边有你的固定文字。
2、将你的文本框边框宽度设置为0。
3、将文本框里可输入的文字设置向右偏移N个像素（像素数取决于你的文字长度），CSS里有这个属性找一下，以前做过的不想再去翻以前的资料了。
本回答被网友采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
你可以弄2文本啊，第一个readonly
追问
我已经这样做了，可不太好看。
我就想在一个文本框里完成呀。
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
