jQuery 如何实现input框输入数值自动生成对应数量的input框
时间: 2024-01-21 17:04:13 浏览: 72
jQuery可以使用append()方法动态添加input框。可以先获取input框中输入的数值,然后使用循环动态添加对应数量的input框。以下是示例代码:
```html
<body>
<input type="number" id="numInput">
<button id="generateBtn">生成</button>
<div id="inputContainer"></div>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
$("#generateBtn").click(function() {
var num = $("#numInput").val();
$("#inputContainer").empty(); // 清空div中的内容
for (var i = 0; i < num; i++) {
$("#inputContainer").append("<input type='text'><br>");
}
});
});
</script>
</body>
```
当用户点击"生成"按钮时,会根据输入的数值动态生成对应数量的input框。
相关问题
多个input 框实现自动换行
对于多个input框实现自动换行,可以借助HTML和CSS来实现。以下是一种实现方法:
首先,在HTML中创建一个包含多个input框的父容器,例如一个div:
<div id="inputContainer">
<input type="text" id="input1">
<input type="text" id="input2">
<input type="text" id="input3">
...
</div>
然后,在CSS中对父容器进行样式设置,使其具有自动换行的效果:
#inputContainer {
display: flex;
flex-wrap: wrap;
}
最后,使用JavaScript或jQuery监听每个input框的文本改变事件,当文本改变时调整父容器的高度以适应内容,以实现自动换行:
$(document).ready(function() {
$("input[type='text']").on("input", function() {
$("#inputContainer").height("auto");
});
});
这样,当输入的文本超出一个input框的宽度时,父容器会自动换行,使得每个input框都能容纳文本,并且父容器的高度会根据内容自动调整,以适应所有输入框的高度。
使用jquery动态添加input框,监听其输入结果
你可以使用以下代码实现:
HTML部分:
```html
<div id="input-container">
<button id="add-input-btn">添加输入框</button>
</div>
```
JavaScript部分:
```javascript
$(function() {
var container = $('#input-container');
var addBtn = $('#add-input-btn');
var inputIndex = 0;
addBtn.click(function() {
var input = $('<input>').attr({
type: 'text',
name: 'input-' + inputIndex
});
container.append(input);
inputIndex++;
input.on('input', function() {
var inputValue = $(this).val();
console.log('输入框值为:' + inputValue);
});
});
});
```
这段代码会监听添加的每个输入框的输入事件,并在控制台打印输入框的值。每当点击“添加输入框”按钮时,就会添加一个新的输入框。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)