文本框组件实现填空效果,自动跟随中文变大.

来源：互联网发布：淘宝用花呗付款好吗编辑：程序博客网时间：2024/06/03 15:38

<!DOCTYPE html>
<html>
 <head>
 <meta charset="UTF-8">
 <title></title>
 <style>
 input{
 outline:none;
 }
 .space{
 border:0px;
 outline:none;
 border-bottom: 2px;
 border-style: solid;
 border-color: #000;
 -webkit-appearance: none;
 }
 .space:focus
{
 border:0px;
 border-bottom: 2px;
 border-style: solid;
 border-color: red;
}
 </style>
 <script type="text/javascript">
window.onload=function(){

var nodes= document.getElementsByClassName("space");
for(var i = 0; i < nodes.length; i++){
nodes[i].onkeyup=function(){
var chinasize=0;
var maxtextsize=this.maxLength*2;
var mintextsize=4;
var re=/[^\u0000-\u00ff]/g;
chinasize=this.value.replace(re,"aa").length;
if ((chinasize>=mintextsize) && (chinasize<=maxtextsize)){
 //console.log("此时chinasize:"+chinasize+" mintextsize:"+mintextsize+" maxtextsize:"+maxtextsize +" maxLength:"+this.maxLength);
 this.size=chinasize;
}else if(chinasize>maxtextsize){
 this.size=maxtextsize;
}else{
 this.size=mintextsize;
}
}
}
};
function msgbox(){
 alert(document.getElementById('an1').value);
}
 </script>
 </head>
 <body>
 <input type="text" class="space" id="an1" size="4" maxLength=10 > 
 <input type="text" class="space" id="an4" size="4" maxLength=20> 
 <input type="submit" onclick="msgbox()" value="获取输入">
 </body>
</html>

0 0