HTML+JS 实现select 选择其他后要求继续输入
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了HTML+JS 实现select 选择其他后要求继续输入相关的知识，希望对你有一定的参考价值。
如题，在html里，在select一个代表其他的“option”后，要求显示一个文本框，并要求输入文本
参考技术A <!DOCTYPE HTML><html>
<head>
<meta charset="UTF-8" />
<title>test</title>
<script>
var sel = function(s)
if(s.children[s.selectedIndex].innerHTML.replace(/^[\\r\\n\\f\\t\\x20]+|[\\r\\n\\f\\t\\x20]+$/g,"")=="其他")
var inp = document.createElement("input");
inp.type = "text";
inp.placeholder="赶快输入";
inp.id = "inp";
document.body.appendChild(inp);
alert("输入");
else
var inp = null;
if(!!(inp=document.getElementById("inp")))
inp.outerHTML = "";
</script>
</head>
<body>
<select onchange = "sel(this)">
<option>sdf</option>
<option>其他</option>
</select>
</body>
<footer>
</footer>
</html>追问
未实现显示“文本框”啊
本回答被提问者和网友采纳关于自定义select打开后点击页面其他地方关闭的一些总结
1.第一版，只有点击打开按钮才能关闭
这个就没什么好说的，点击按钮，做对应操作，贼简单，不过体验也同样贼差。
点开选择框之后只有点击打开选择框的按钮才能关闭。
2.第二版，在选择框后，其他元素之前加上一个蒙版
蒙版加上之后，可以是透明的，也可以是半透明的，不过一个选择框加个半透明的蒙版有点不伦不类。
这样基本的点击其他位置关闭选择框的功能是实现了，但是有个致命的缺点，就是你点击其他地方是没有效果的。
因为你第一次点击的是蒙版，所以其他地方并没有背点击，体验感很差。
3.第三版，加全局点击事件
这个方法基本就可以实现了点击按钮打开选择框，点击其他位置关闭选择框，呃，来看看代码：
this.showList = !this.showList;
if(this.showList){
var _this = this;
setTimeout(function () {
var windowClick = window.onclick;
window.onclick = function(e){
_this.showList = false;
if(windowClick){
windowClick(e);
}
window.onclick = windowClick;
};
},0);
}
在选择框打开的时候顺便给一个一次性的window.click事件下次不管点击哪里都会触发，然后关闭选择框。
但是这样写也会有一些问题，就是在一些阻止冒泡的dom上边触发click事件的时候，并不会关闭选择框。
4.第四版，打开选择框的元素触发blur事件
blur事件是一部分元素的事件，所以需要在点击打开选择框的元素上添加一个属性：tabindex="-1"。
普通元素加上tabindex属性之后就可以拥有focus和blur事件，这样就可以完美实现点击其他位置关闭选择框的目的了。
给值-1是因为防止按tab键选中这个元素，当然也可以给正值，这个属性的值代表的是按tab键选中此元素的顺序，感觉和z-index理解差不多数字越小越靠前选中（0除外，0是最后一个被选中，但是也有focus和blur事件）。
最后附上测试的代码：
<div class="vueApp"> <div tabindex="2" @focus="console(‘div tabindex=“2” focus‘)" @blur="console(‘div tabindex=“2” blur‘)">tabindex="2"</div> <el-input @focus="console(‘input focus‘)" v-model="input"></el-input> <div tabindex="-1" @focus="console(‘div tabindex=“-1” focus‘)" @blur="console(‘div tabindex=“-1” blur‘)">tabindex="-1"</div> <div @focus="console(‘div not tabindex focus‘)" @blur="console(‘div not tabindex blur‘)">not tabindex</div> <div tabindex="1" @focus="console(‘div tabindex=“1” focus‘)" @blur="console(‘div tabindex=“1” blur‘)">tabindex="1"</div> <div tabindex="1" @focus="console(‘div tabindex=“1” focus‘)" @blur="console(‘div tabindex=“1” blur‘)">tabindex="1"</div> <div tabindex="0" @focus="console(‘div tabindex=“0” focus‘)" @blur="console(‘div tabindex=“0” blur‘)">tabindex="0"</div> </div>
new Vue({ el:".vueApp", data:{ input:"13212" }, mounted:function(){}, methods:{ console:function (str) { console.log(str); } } })
以上是关于HTML+JS 实现select 选择其他后要求继续输入的主要内容，如果未能解决你的问题，请参考以下文章
js怎么实现，选中添加，不选中就取消刚才添加的数据，但是不能取消其他选中的数据