javascript 动态创建 input 文本框

最新推荐文章于 2023-12-29 14:34:36 发布

lilianplayer_163

最新推荐文章于 2023-12-29 14:34:36 发布

阅读量8.8k

点赞数

文章标签： input javascript microsoft xhtml button border

<!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" >
    //Copyright 2008
    //by 小吴同学 QQ:100052800
    //Date 2008-11-25

    //创建 input 文本框
    function CreateInput(){
        var input = document.createElement("input" );
        input.type = "text" ;
        input.id = "inputText" ;
        input.value = "这个文本框是JS创建的" ;
        //如果使用CSS定义input样式可以用 className 指定样式名，如用JS创建，放开下面的注释即可
        input.className = "TextStyle" ;
        //使用以下定义，需注释 //input.className = "TextStyle";
        /*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);
    }
</script>

</head>

<body onload= "CreateInput()" >
    <div id= "showText" ></div>
    <input type= "button" onclick= "alert(document.getElementById('inputText').value)" value= "获取创建文本框的值" />
</body>
</html>