首页 > 代码库 > JS动态生成Input文本框 并获取文本框值
JS动态生成Input文本框 并获取文本框值
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns= "http://www.w3.org/1999/xhtml" >
<head>
<meta http-equiv= "Content-Type" content= "text/html; charset=utf-8" />
<title> javascript 动态创建 input 文本框</title>
<style type= "text/css" >
<!--
body {
font :12px “ Microsoft Sans Serif” ;
}
.TextStyle{
width :300px ;
height :16px ;
line-height :16px ;
border :1px solid #006699 ;
font :12px "Microsoft Sans Serif" ;
padding :2px ;
color :#006699 ;
}
-- >
</style>
<script type= "text/javascript" >
//创建 input 文本框
function CreateInput(){
var input = document.createElement("input" );
input.type = "text" ;
input.id = "inputText" ;
input.placeholder="请填写项目名称";
input.myholder = "请填写项目名称";
//input.onfocus = "this.value=http://www.mamicode.com/‘‘";
//input.onblur = "if(this.value=http://www.mamicode.com/‘‘){this.value=‘请填写项目名称‘}";
/*input.style.width = "300px";
input.style.height = "16px";
input.style.lineHeight = "16px";
input.style.border = "1px solid #006699";
input.style.font = "12px ‘Microsoft Sans Serif‘";
input.style.padding = "2px";
input.style.color = "#006699";*/
document.getElementById("showText" ).appendChild(input);
}
function GetClassName(){
var InputValue=http://www.mamicode.com/document.getElementsByName(‘TextStyle‘)
var strValue=http://www.mamicode.com/[];
for(var i=0;i<InputValue.length;i++)strValue.push( InputValue[i].value);
alert(strValue);
}
</script>
</head>
<body >
<div id= "showText" ></div>
<input type= "button" onclick= "CreateInput()" value= "http://www.mamicode.com/动态生成input" /> <br /><br />
<input type= "button" onclick= "GetClassName()" value= "http://www.mamicode.com/获取创建文本框的值" />
</body>
</html>