Select 可编辑 - 完美支持各大主流浏览器
生活随笔
收集整理的這篇文章主要介紹了
Select 可编辑 - 完美支持各大主流浏览器
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
最近做項目有個select可編輯的需求,一時棘手,網上找了很多解決方案都不完美,沒辦法自己寫了一個,經測試IE,FF,chrome都支持。特此拿出來共享一下。
實現原理還是用select和input偽裝成的,只不過是在樣式處理上做了一些改進。
<!DOCTYPE html PUBLIC "-//W3C//Dth XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/Dth/xhtml1-transitional.dth"> <html xmlns="http://www.w3.org/1999/xhtml"> <head><script language="javascript"> function changeF() {document.getElementById('txt').value = document.getElementById('sel').options[document.getElementById('sel').selectedIndex].value; } </script> </head> <body><div style="position:relative; width:?240px;height:20px;margin-bottom:10px;margin-left:26px;"> <select id="sel" style="float: right; height: 22px;width: 140px; z-index:88; position:absolute; left:100px; top:0px;" onchange="changeF();"><option value="111">111</option> <option value="222">222</option>
<option value="333">333</option> </select><input type="text" id="txt" value="" style="position:absolute; width:118px; height:14px; left:101px;top:1px;z-index:99; border:1px #FFF solid" /> </div> </body> </html>
轉載于:https://www.cnblogs.com/Bulid-For-NET/archive/2013/06/08/3127191.html
總結
以上是生活随笔為你收集整理的Select 可编辑 - 完美支持各大主流浏览器的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： IOUtils
- 下一篇： 2017年html5行业报告,云适配发布