如何創建自定義控件-首選是普通的HTML控件，而不是服務器端

Question

我是ASP.NET開發的新手，我想設計一個自定義控件，特別是Textbox 。

規格如下：

1. 文本框必須包含兩張圖像，一幅在最右邊，另一幅在最左邊。

2. 邊距必須根據圖像寬度固定

3. 如果文本框包含一些值，則必須顯示左圖

4. 如果文本框為空，則應隱藏左側圖像。

5. 如果文本框接收到焦點，則右側圖像應該可見。 僅當文本框獲得焦點時，此圖像才會顯示。

6. 兩個圖像都必須僅在文本框上方。

Answer 1

嘗試以下方法。

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script> $(document).ready(function(){ $(".text-box").focusin(function(){ $(this).parent().find('img.msg').show(); }); $(".text-box").focusout(function(){ $(this).parent().find('img.msg').hide(); }); $(".text-box").keyup(function(){ if($(this).val().length>0) { $(this).parent().find('img.arrow').show(); }else{ $(this).parent().find('img.arrow').hide(); } }); }); </script> <style> .text-box-with-image { position:relative; display:inline-block; } .text-box-with-image input[type=text] { padding:10px; padding-left:20px; padding-right:20px; } img.arrow { position: absolute; left: 0; top: 11px; display:none; } img.msg { position: absolute; right: 0px; top: 11px; display:none; } </style> <div class="text-box-with-image"> <input class="text-box" type="text"> <img class="arrow" width="20" height="20" src="http://free-icon-download.com/modules/PDdownloads/images/screenshots/free-icon-download_gradient-blue-arrow-right.png"> <img class="msg" width="20" height="20" src="https://cdn1.iconfinder.com/data/icons/appicns/513/appicns_iChat.png"> </div>