"點擊input輸入框彈出選擇層"的實現

本文轉載自查看原文 2015-11-21 18:27 1919

需求為在一個Repeat中的text增加提示選項，可以直接輸入，也可以點擊選項給textBox賦值。而且是2個不同的text需要2個不同的提示選項。

首先在網上找，我找到了一個大概可用的控件，網址如下:

http://www.51xuediannao.com/js/jquery/jquery_input_tanchu/popDiv.html

改造之后的代碼如下:

  1 <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
  2 
  3 <!DOCTYPE html>
  4 
  5 <html xmlns="http://www.w3.org/1999/xhtml">
  6 <head runat="server">
  7     <title>Test</title>
  8     <style type="text/css">
  9         body {
 10             font-size: 12px;
 11         }
 12 
 13         .selectItemcont {
 14             padding: 8px;
 15         }
 16 
 17         #selectUnit {
 18             background: #FFF;
 19             position: absolute;
 20             top: 0px;
 21             left: center;
 22             border: 1px solid #000;
 23             overflow: hidden;
 24             width: 240px;
 25             z-index: 1000;
 26         }
 27 
 28         #selectCountry {
 29             background: #FFF;
 30             position: absolute;
 31             top: 0px;
 32             left: center;
 33             border: 1px solid #000;
 34             overflow: hidden;
 35             width: 240px;
 36             z-index: 1000;
 37         }
 38 
 39         .selectItemtit {
 40             line-height: 20px;
 41             height: 20px;
 42             margin: 1px;
 43             padding-left: 12px;
 44         }
 45 
 46         .bgc_ccc {
 47             background: #E88E22;
 48         }
 49 
 50         .selectItemleft {
 51             float: left;
 52             margin: 0px;
 53             padding: 0px;
 54             font-size: 12px;
 55             font-weight: bold;
 56             color: #fff;
 57         }
 58 
 59         .selectItemright {
 60             float: right;
 61             cursor: pointer;
 62             color: #fff;
 63         }
 64 
 65         .selectItemcls {
 66             clear: both;
 67             font-size: 0px;
 68             height: 0px;
 69             overflow: hidden;
 70         }
 71 
 72         .selectItemhidden {
 73             display: none;
 74         }
 75     </style>
 76     <script src="JS/jquery-1.3.1.js"></script>
 77     <script src="JS/jquery.bgiframe.js"></script>
 78 </head>
 79 <body>
 80     <form id="form1" runat="server">
 81         <div>
 82             <table>
 83                 <tr>
 84                     <th>Unit</th>
 85                     <th>Country</th>
 86                 </tr>
 87                 <asp:Repeater ID="rptData" runat="server">
 88                     <ItemTemplate>
 89                         <tr>
 90                             <td>
 91                                 <input type="text" value='<%#Eval("Unit")%>' id="txtUnit" name="txtUnit"/>
 92                             </td>
 93                             <td>
 94                                 <input type="text" value='<%#Eval("Country")%>' id="txtCountry" name="txtCountry"/>
 95                             </td>
 96                         </tr>
 97                     </ItemTemplate>
 98                 </asp:Repeater>
 99             </table>
100         </div>
101         <div id="selectUnit" class="selectItemhidden">
102             <div id="selectItemAd" class="selectItemtit bgc_ccc">
103                 <h2 id="selectItemTitle" class="selectItemleft">請選擇單位</h2>
104                 <div id="selectItemClose" class="selectItemright">關閉</div>
105             </div>
106             <div id="selectItemCount" class="selectItemcont">
107                 <div id="selectSub">
108                     <input type="checkbox" name="cr01" id="cr01" value="KG" /><label for="cr01">千克</label>
109                     <input type="checkbox" name="cr02" id="cr02" value="PCS" /><label for="cr02">個</label>
110                     <input type="checkbox" name="cr03" id="cr03" value="KM" /><label for="cr03">千米</label>
111                 </div>
112             </div>
113         </div>
114         <div id="selectCountry" class="selectItemhidden">
115             <div id="selectItemAd" class="selectItemtit bgc_ccc">
116                 <h2 id="selectItemTitle" class="selectItemleft">請選擇國家地區</h2>
117                 <div id="selectItemClose" class="selectItemright">關閉</div>
118             </div>
119             <div id="selectItemCount" class="selectItemcont">
120                 <div id="selectSub">
121                     <input type="checkbox" name="cr04" id="cr04" value="CN" /><label for="cr04">中國</label>
122                     <input type="checkbox" name="cr05" id="cr05" value="HK" /><label for="cr05">香港</label>
123                     <input type="checkbox" name="cr06" id="cr06" value="DE" /><label for="cr06">德國</label>
124                     <input type="checkbox" name="cr07" id="cr07" value="US" /><label for="cr07">美國</label>
125                 </div>
126             </div>
127         </div>
128     </form>
129 </body>
130 <script type="text/javascript">
131     jQuery.fn.selectCity = function (targetId) {
132         var _seft = this;
133         var targetId = $(targetId);
134 
135         this.click(function () {
136             var A_top = $(this).offset().top + $(this).outerHeight(true);  //  1
137             var A_left = $(this).offset().left;
138             targetId.bgiframe();
139             targetId.show().css({ "position": "absolute", "top": A_top + "px", "left": A_left + "px" });
140         });
141 
142         targetId.find("#selectItemClose").click(function () {
143             targetId.hide();
144         });
145 
146         targetId.find("#selectSub :checkbox").click(function () {
147             targetId.find(":checkbox").attr("checked", false);
148             $(this).attr("checked", true);
149             _seft.val($(this).val());
150             targetId.hide();
151         });
152 
153         $(document).click(function (event) {
154             if (event.target.id != _seft.selector.substring(1)) {
155                 targetId.hide();
156             }
157         });
158 
159         targetId.click(function (e) {
160             e.stopPropagation(); //  2
161         });
162 
163         return this;
164     }
165 
166     $(function () {
167         //test1:
168         $("#txtUnit").selectCity("#selectUnit");
169         //test2：
170         $("#txtCountry").selectCity("#selectCountry");
171     });
172 </script>
173 </html>

View Code

我在使用過程中發現問題:1)repeat里面的第二行不能顯示提示 2)輸入值和提示選項沒有互相賦值(直接修改輸入框的值，彈出的提示沒有改變) 3)使用checkBox不太專業，這個應該是radio ,4)User提出，如果text中有人工輸入，提示就需要自動消失

2）3）4)都很容易解決，1)花費了一些時間，最后終於解決了，也解決了原來的作者的兩個一樣的提示選項，需要兩個不同的DIV的問題。

  1 <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
  2 
  3 <!DOCTYPE html>
  4 
  5 <html xmlns="http://www.w3.org/1999/xhtml">
  6 <head runat="server">
  7     <title>Test</title>
  8     <style type="text/css">
  9         body {
 10             font-size: 12px;
 11         }
 12 
 13         .selectItemcont {
 14             padding: 8px;
 15         }
 16 
 17         #selectUnit {
 18             background: #FFF;
 19             position: absolute;
 20             top: 0px;
 21             left: center;
 22             border: 1px solid #000;
 23             overflow: hidden;
 24             width: 240px;
 25             z-index: 1000;
 26         }
 27 
 28         #selectCountry {
 29             background: #FFF;
 30             position: absolute;
 31             top: 0px;
 32             left: center;
 33             border: 1px solid #000;
 34             overflow: hidden;
 35             width: 240px;
 36             z-index: 1000;
 37         }
 38 
 39         .selectItemtit {
 40             line-height: 20px;
 41             height: 20px;
 42             margin: 1px;
 43             padding-left: 12px;
 44         }
 45 
 46         .bgc_ccc {
 47             background: #E88E22;
 48         }
 49 
 50         .selectItemleft {
 51             float: left;
 52             margin: 0px;
 53             padding: 0px;
 54             font-size: 12px;
 55             font-weight: bold;
 56             color: #fff;
 57         }
 58 
 59         .selectItemright {
 60             float: right;
 61             cursor: pointer;
 62             color: #fff;
 63         }
 64 
 65         .selectItemcls {
 66             clear: both;
 67             font-size: 0px;
 68             height: 0px;
 69             overflow: hidden;
 70         }
 71 
 72         .selectItemhidden {
 73             display: none;
 74         }
 75     </style>
 76     <script src="JS/jquery-1.3.1.js"></script>
 77     <script src="JS/jquery.bgiframe.js"></script>
 78 </head>
 79 <body>
 80     <form id="form1" runat="server">
 81         <div>
 82             <table>
 83                 <tr>
 84                     <th>Unit</th>
 85                     <th>Country</th>
 86                 </tr>
 87                 <asp:Repeater ID="rptData" runat="server">
 88                     <ItemTemplate>
 89                         <tr>
 90                             <td>
 91                                 <input type="text" value='<%#Eval("Unit")%>' id="txtUnit" name="txtUnit" />
 92                             </td>
 93                             <td>
 94                                 <input type="text" value='<%#Eval("Country")%>' id="txtCountry" name="txtCountry" />
 95                             </td>
 96                         </tr>
 97                     </ItemTemplate>
 98                 </asp:Repeater>
 99             </table>
100         </div>
101         <div id="selectUnit" class="selectItemhidden">
102             <div id="selectItemAd" class="selectItemtit bgc_ccc">
103                 <h2 id="selectItemTitle" class="selectItemleft">請選擇單位</h2>
104                 <div id="selectItemClose" class="selectItemright">關閉</div>
105             </div>
106             <div id="selectItemCount" class="selectItemcont">
107                 <div id="selectSub">
108                     <input type="radio" name="cr01" id="cr01" value="KG" /><label for="cr01">千克</label>
109                     <input type="radio" name="cr02" id="cr02" value="PCS" /><label for="cr02">個</label>
110                     <input type="radio" name="cr03" id="cr03" value="KM" /><label for="cr03">千米</label>
111                 </div>
112             </div>
113         </div>
114         <div id="selectCountry" class="selectItemhidden">
115             <div id="selectItemAd" class="selectItemtit bgc_ccc">
116                 <h2 id="selectItemTitle" class="selectItemleft">請選擇國家地區</h2>
117                 <div id="selectItemClose" class="selectItemright">關閉</div>
118             </div>
119             <div id="selectItemCount" class="selectItemcont">
120                 <div id="selectSub">
121                     <input type="radio" name="cr04" id="cr04" value="CN" /><label for="cr04">中國</label>
122                     <input type="radio" name="cr05" id="cr05" value="HK" /><label for="cr05">香港</label>
123                     <input type="radio" name="cr06" id="cr06" value="DE" /><label for="cr06">德國</label>
124                     <input type="radio" name="cr07" id="cr07" value="US" /><label for="cr07">美國</label>
125                 </div>
126             </div>
127         </div>
128     </form>
129 </body>
130 <script type="text/javascript">
131     jQuery.fn.selectCity = function (targetId) {
132         var _seft = this;
133         var targetId = $(targetId);
134 
135         targetId.click(function (e) {
136             e.stopPropagation(); //  2
137         });
138 
139         return this.each(function () {
140             var $this = $(this);
141             $this.click(function () {
142                 $(".selectItemhidden").hide();
143                 var A_top = $(this).offset().top + $(this).outerHeight(true);  //  1
144                 var A_left = $(this).offset().left;
145                 targetId.bgiframe();
146                 targetId.show().css({ "position": "absolute", "top": A_top + "px", "left": A_left + "px" });
147 
148                 targetId.find(":radio").attr("checked", false);
149                 targetId.find(":radio").each(function () {
150                     if ($(this).val() == $this.val()) {
151                         $(this).attr("checked", true);
152                     }
153                 });
154                 
155                 targetId.find("#selectItemClose").click(function () {
156                     targetId.hide();
157                 });
158                
159                 targetId.find("#selectSub :radio").unbind();
160                 targetId.find("#selectSub :radio").click(function () {
161                     targetId.find(":radio").attr("checked", false);
162                     $(this).attr("checked", true);
163                     $this.val($(this).val());
164                     targetId.hide();
165                 });
166 
167                 $(document).unbind('click');
168                 $(document).click(function (event) {
169                     if (event.target.id != $this.attr("id")) {
170                         targetId.hide();
171                     }
172                 });
173             })
174             $this.keydown(function () { $(".selectItemhidden").hide(); });
175         });  
176     }
177 
178     $(function () {
179         //test1:
180         $("input[name='txtUnit']").selectCity("#selectUnit");
181         //test2：
182         $("input[name='txtCountry']").selectCity("#selectCountry");
183     });
184 </script>
185 </html>

View Code

這個還有代完善的地方:

1)radio也不是很專業，如果碰到項次內容長短不齊，項次很多，會變成亂七八糟的，而我在實際使用的時候，我用到了<br/>來換行，但是點擊非文字的部分不會選中，只能使用空格填充，中英文夾雜在一起的時候進行空格補齊那是件不可能完成的任務。最好還是需要修改為<li>

2)在JS代碼中使用了$(".selectItemhidden")來選擇所有的選項DIV，不是很合適

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 點擊input輸入框彈出選擇層移動端頁面中點擊input輸入框的時候彈出的鍵盤將輸入框擋住的問題 javascript彈出層輸入框阻止input輸入框彈出輸入法 CSS 實現輸入框點擊自動選中所有內容（input+textarea） vue中點擊輸入框彈出事件 HTML 實現偽類之input輸入框鼠標點擊邊框變色效果實現bootstrap布局的input輸入框中的圖標點擊功能 jquery實現input輸入框點擊加減數值隨之變動 VUE實現Studio管理后台（十一）：下拉選擇列表（Select）控件，輸入框input系列