c# - 如何创建自定义控件 - 更喜欢成为普通的 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>