html点击输入框弹出单选表单,然后将单选框最后选定内容返回给输入框
时间: 2024-05-06 15:21:45 浏览: 6
这可以通过JavaScript来实现。你可以创建一个包含单选框的HTML表单,然后通过JavaScript在点击输入框时弹出该表单。接着,监听表单提交的事件,获取选定的单选框的值,并将其赋值给输入框。以下是一个实现示例:
HTML代码:
```
<input type="text" id="myInput" onclick="showRadioForm()">
```
JavaScript代码:
```
function showRadioForm() {
// 创建单选框表单
var form = document.createElement('form');
form.innerHTML = '<input type="radio" name="option" value="Option 1"> Option 1<br>' +
'<input type="radio" name="option" value="Option 2"> Option 2<br>' +
'<input type="radio" name="option" value="Option 3"> Option 3<br>';
// 弹出表单
var input = document.getElementById('myInput');
input.parentNode.insertBefore(form, input.nextSibling);
// 监听表单提交事件
form.addEventListener('submit', function(event) {
event.preventDefault();
var selectedOption = form.querySelector('input[name="option"]:checked');
if (selectedOption) {
input.value = selectedOption.value;
form.parentNode.removeChild(form);
}
});
}
```
这个示例中,当输入框被点击时,创建一个包含三个单选框的表单,并将表单插入到输入框后面。接着,监听表单的提交事件,获取选定的单选框的值,并将其赋值给输入框。最后,移除表单。