原生js弹出多个输入框
时间: 2024-03-27 08:37:08 浏览: 34
要弹出多个输入框,可以使用循环来实现。以下是一个示例代码,它会弹出3个输入框,用户可以在每个输入框中输入内容,点击"确定"或"取消"按钮,最后将所有的输入内容存储在一个数组中:
```javascript
var inputs = []; // 存储所有输入的数组
for (var i = 0; i < 3; i++) {
var input = prompt("请输入内容", ""); // 弹出输入框
if (input != null) {
inputs.push(input); // 将输入内容存储到数组中
}
}
console.log(inputs); // 输出所有输入的数组
```
在上述代码中,我们使用了一个`for`循环来弹出3个输入框,每个输入框的输入内容都会被存储在`inputs`数组中。如果用户点击了"取消"按钮,那么该输入框的输入内容不会被存储。最后,我们使用`console.log`输出所有输入的数组。
相关问题
原生js弹窗弹出一个输入框
使用原生JS弹出输入框的代码如下:
```javascript
var userInput = prompt("请输入内容", "");
```
这个代码会在页面上弹出一个带有输入框的弹窗,用户可以在输入框中输入内容,并点击"确定"或"取消"按钮。用户输入的内容会被存储在变量`userInput`中,如果用户点击了"取消"按钮,那么`userInput`的值为`null`。
原生js实现一个弹出自定义输入框
好的,以下是一个简单的实现:
HTML:
```
<button onclick="showInput()">点击弹出输入框</button>
```
JavaScript:
```
function showInput() {
// 创建一个input元素
var input = document.createElement('input');
input.type = 'text';
// 创建一个确认按钮
var confirmBtn = document.createElement('button');
confirmBtn.innerText = '确定';
// 创建一个取消按钮
var cancelBtn = document.createElement('button');
cancelBtn.innerText = '取消';
// 创建一个div元素来包裹input和按钮
var div = document.createElement('div');
div.appendChild(input);
div.appendChild(confirmBtn);
div.appendChild(cancelBtn);
// 将div添加到页面中
document.body.appendChild(div);
// 点击确认按钮时获取输入值并移除弹框
confirmBtn.onclick = function() {
var inputValue = input.value;
document.body.removeChild(div);
console.log('输入的值为:' + inputValue);
};
// 点击取消按钮时移除弹框
cancelBtn.onclick = function() {
document.body.removeChild(div);
};
}
```
当点击按钮时,会弹出一个输入框和确认、取消两个按钮。输入框输入内容后,点击确认按钮可以获取输入的内容,点击取消按钮可以关闭弹框。