div 中class 是input 如何让两个input数据同步
时间: 2024-05-06 09:18:29 浏览: 5
你可以通过JavaScript监听这两个input的输入事件,然后将一个input的值赋给另一个input,这样就可以让它们的数据同步了。具体实现可以参考下面的代码:
```html
<div class="input-container">
<input id="input-1" class="input" type="text" placeholder="Input 1">
<input id="input-2" class="input" type="text" placeholder="Input 2">
</div>
<script>
const input1 = document.getElementById('input-1');
const input2 = document.getElementById('input-2');
// 监听输入事件
input1.addEventListener('input', () => {
input2.value = input1.value;
});
input2.addEventListener('input', () => {
input1.value = input2.value;
});
</script>
```
在上面的代码中,我们首先获取了两个input元素,然后分别监听了它们的输入事件。当一个input的值发生改变时,我们将这个值赋给另一个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 属性来控制输入框的外边距和内边距,从而达到没有间隙的效果。