JS动态生成Input文本框 并获取文本框值

最新推荐文章于 2023-06-29 09:17:03 发布
最新推荐文章于 2023-06-29 09:17:03 发布
阅读量1.1k 收藏 3
点赞数 1
文章标签： xhtml javascript ViewUI
原文链接：http://www.cnblogs.com/Smily-C/p/3832672.html
版权

<!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.className = "TestStyle";
input.placeholder="请填写项目名称";
input.myholder = "请填写项目名称";
//input.onfocus = "this.value=''";
//input.onblur = "if(this.value=''){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 strValue = [];
        $(".TextStyle").each(function () {
            var value = $(this).val();
            strValue.push(value);
        })
        alert(strValue);
}
</script>

</head>

<body >
<div id= "showText" ></div>
<input type= "button" οnclick= "CreateInput()" value= "动态生成input" /> <br /><br />
<input type= "button" οnclick= "GetClassName()" value= "获取创建文本框的值" />
</body>
</html>

转载于:https://www.cnblogs.com/Smily-C/p/3832672.html

dkt98203
关注
  • 1
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
jquery input文本框模拟select选择框获取选定
11-11
对于标题提到的"jquery input文本框模拟select选择框获取选定"，这是一个常见的需求，特别是在需要用户从一系列选项中进行选择但又希望保持界面简洁的情况下。这里我们将详细讨论如何使用jQuery来实现这个功能。 ...
JavaScript动态创建Input输入框动态获取值
进修的CODER
05-11 2万+
某些情况下需要使用JS动态获取HTML控件并且设置它的CSS样式。 并且可以获取输入的值并显示出来。采用document对象的API方法， 使用document.createElement("input");创建一个输入框，用JS设置CSS 属性input.className；document.getElementById("vote")获取对象，在 对象中进行插入:vote.insert
JS实现点击按钮添加输入框并输出值
热门推荐
qq_42583562的博客
12-29 2万+
【代码】JS实现点击按钮添加输入框并输出值。
JavaScript 获取 input 输入框内容的几种方法
每天都想吃好吃的
06-29 1万+
```例如： let inputText = document.getElementsByTagName("input")[0].value;```例如：let inputText = document.getElementsByName("input")[0].value;```例如：let inputText = document.querySelector("#input").value;````例如：let form = document.forms[0];
js实时获取input输入框的动态值
qq_72760247的博客
10-29 2537
js实时获取input输入框的动态值
JS动态创建input
qq_42689281的博客
06-29 2744
<!DOCTYPE html> <html> <head> <title>HAOHAO</title> <style type="text/css"> </style> </head> <body> <div id="div"> <input type="button" name="add_input" value="增加" onclick="addInput();"
js动态生成文本框并有删除功能
11-23
### JS动态生成文本框并实现删除功能的知识点 在现代Web开发中，动态地操作DOM（文档对象模型）是常见的需求之一。通过JavaScript可以轻松地实现这一目标。本篇文章将详细解析如何使用JavaScript来动态创建文本框，...
使一个input文本框随其中内容而变化长度的方法
09-28
为了改善用户体验，有时需要根据输入的内容动态调整input文本框的长度。 在上述描述中，我们可以通过JavaScript来实现这一需求。具体方法是在input元素上使用JavaScript事件处理器。首先，通过使用onkeyup和...
动态生成文本框
03-29
在JavaScript中，一个简单的实现动态生成文本框的代码可能如下： ```javascript document.getElementById('addButton').addEventListener('click', function() { var newTextBox = document.createElement('input'...
jquery动态生成文本框，含删除按钮
10-17
4. **动态生成文本框**：在生成函数内部，使用`$('<input type="text">')`创建一个新的文本框元素，并可以设置其属性，如ID或class。同时，创建一个删除按钮，通常是一个`<button>`元素，绑定一个删除事件监听器。 ...
Js动态生成Input标签
蕃薯耀
12-07 772
  Js动态生成Input标签 在IE中input.name不能正常赋值： 由于Name属性在不同浏览器赋值不同，所以在操作时应该注意。   /**生成Input标签**/ function generateInput(type,id,name){ var input; if(document.all){ if(name != null &amp;&amp; ...
js jquery给input标签赋值、取值
qq_43546561的博客
08-20 541
js jquery给input标签赋值、取值html代码赋值取值 html代码 <input type="text" id="name"/> 赋值 $("#name").val('test');//赋值 取值 var name=$("#name").val();
获取动态input框的内容
prime1019的博客
06-24 4063
对于静态的inout框，例如： <input type="text" id="inpue1" > 获取这样的input框中的内容很简单，直接$("inpue1").val() 在项目开发中，input框可能是动态生成的，所有inout框的id值就不能知道，id值应该是唯一的，那么对于这种情况，怎么获得我输入的内容呢 方式(一）： alert($("input[name='...
js动态创建input元素并自动获取焦点
cobek的博客
02-13 1万+
input元素不会自动获取焦点代码如下： <div> <h2>js创建input元素并自动聚焦</h2> </div> <script> let myButton = document.createElement('button'); myButton.innerText = ' 点击我'; document.body.append(myButton); myButton.onmousedown = () => { let
js动态创建input框
weixin_41692437的博客
03-02 5033
1.html代码 <div id="details_p"> <div class="form-inline"> <label><input class="checkbox" type="checkbox" name="link" id="link_check">link<input type="text" name="link_value" placeholder="0" ></label> <inp
js中创建input标签
swag_wind的博客
08-01 2364
通过document来确定创建的标签为input,通过setAttribute来设置input的各项属性。
input文本框内容随机
最新发布
12-05
对于开发者来说，实现input文本框内容随机功能通常需要使用编程语言来生成随机内容，比如使用JavaScript来实现随机生成数字或文字，或者通过后端程序来实现动态生成内容。在界面设计上，可以利用一些样式或动画效果...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值