div 中class 是input 如何让两个input数据同步
时间: 2023-06-26 16:08:21 浏览: 29
你可以使用 JavaScript 来实现让两个 input 数据同步。具体来说,你可以监听其中一个 input 的输入事件,然后将输入的值设置给另一个 input。示例代码如下:
```html
<div>
<input class="input1" type="text">
<input class="input2" type="text">
</div>
<script>
const input1 = document.querySelector('.input1');
const input2 = document.querySelector('.input2');
input1.addEventListener('input', () => {
input2.value = input1.value;
});
input2.addEventListener('input', () => {
input1.value = input2.value;
});
</script>
```
在这个示例中,我们监听了 input1 的输入事件,并将输入的值设置为 input2 的值。同时,我们也监听了 input2 的输入事件,并将输入的值设置为 input1 的值。这样,当其中一个 input 的值改变时,另一个 input 的值也会同步更新。
相关问题
上面的代码不是两个input框,是一个
非常抱歉,我误解了你的描述。如果只有一个输入框,你可以按照以下步骤进行修改:
1. 修改HTML代码,只保留一个输入框和保存按钮:
```html
<div class="layui-form-item">
<label class="layui-form-label">接口:</label>
<div class="layui-input-inline">
<input type="text" id="input" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<div class="layui-input-block">
<button class="layui-btn" id="saveBtn">保存</button>
</div>
</div>
```
2. 修改JavaScript代码,发送查询和修改请求:
```javascript
$('#saveBtn').on('click', function() {
var value = $('#input').val();
// 发送查询请求
$.ajax({
url: '/Supervision/time/list',
type: 'GET',
data: {
query: value
},
success: function(response) {
// 处理查询结果
console.log(response);
},
error: function(error) {
// 处理错误
console.log(error);
}
});
// 发送修改请求
$.ajax({
url: '/Supervision/time/edit',
type: 'POST',
data: {
modify: value
},
success: function(response) {
// 处理修改结果
console.log(response);
},
error: function(error) {
// 处理错误
console.log(error);
}
});
});
```
现在,只有一个输入框和保存按钮。当点击保存按钮时,将会同时发送查询和修改请求到对应的接口,并将输入框的值作为参数传递。请根据实际情况进行调整和使用。
两个input如何中间没有间隙,在vscode 中输入
在 VS Code 中,您可以使用 HTML 插件来快速编写 HTML 代码,并使用 CSS 控制输入元素的布局。
以下是一个简单的示例:
1. 在 VS Code 中创建一个新的 HTML 文件,并在文件中输入以下代码:
```html
<!DOCTYPE html>
<html>
<head>
<title>Inputs Without Gaps</title>
<style>
/* CSS 样式 */
.input-container {
display: flex;
flex-direction: row;
}
input {
margin: 0;
padding: 10px;
border: none;
border-radius: 5px;
font-size: 18px;
}
</style>
</head>
<body>
<div class="input-container">
<input type="text" placeholder="Input 1">
<input type="text" placeholder="Input 2">
</div>
</body>
</html>
```
2. 保存文件并在浏览器中打开它,您应该可以看到两个输入框并排排列,并且它们之间没有间隙。
在这个示例中,我们使用了 CSS 的 flexbox 布局来将两个输入框放在同一行,并且使用了 margin 和 padding 属性来控制输入框的外边距和内边距,从而达到没有间隙的效果。