在div A中适配搜索文本字段和搜索按钮,可以通过以下步骤实现:
以下是一个示例代码:
HTML代码:
<div id="divB" style="width: 100%;">
<div id="divA">
<form id="searchForm">
<input type="text" id="searchInput" placeholder="请输入搜索内容">
<input type="submit" value="搜索">
</form>
</div>
</div>
CSS代码:
#divA {
width: 100%;
}
#searchInput {
width: 200px;
height: 30px;
border: 1px solid #ccc;
border-radius: 5px;
padding: 5px;
}
#searchForm input[type="submit"] {
width: 80px;
height: 30px;
background-color: #007bff;
color: #fff;
border: none;
border-radius: 5px;
cursor: pointer;
}
JavaScript代码:
document.getElementById("searchForm").addEventListener("submit", function(event) {
event.preventDefault(); // 阻止表单的默认提交行为
var searchContent = document.getElementById("searchInput").value;
// 执行搜索操作,可以根据实际需求进行处理
console.log("搜索内容:" + searchContent);
});
在这个示例中,div A位于div B中,并且div A的宽度设置为100%以适应div B的宽度。在div A中创建了一个表单,包含一个文本输入框和一个搜索按钮。通过CSS样式设置了文本输入框和搜索按钮的样式,使其适应搜索的需求。通过JavaScript代码添加了一个表单提交事件的监听器,当用户点击搜索按钮或按下回车键时,会触发搜索操作,并将搜索内容输出到控制台。
领取专属 10元无门槛券
手把手带您无忧上云