单条目选择控件

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI.WebControls;
using System.Web.UI.HtmlControls;

namespace Gyyx.EOV3.Web.UserControl
{
    /// <summary>
    /// 键值对选择
    /// </summary>
    public class ItemSelector : CompositeControl
    {
        private TextBox tbItemText;
        private HtmlInputHidden hiItemValue;
        private Label lbItemText;
        // private HtmlInputHidden hiItemText;
        private HtmlGenericControl spanClose;

        /// <summary>
        /// 构造 
        /// </summary>
        public ItemSelector()
        {
            tbItemText = new TextBox() { ID = "tbItemText" };
            hiItemValue = new HtmlInputHidden() { ID = "hiItemValue" };
            lbItemText = new Label() { ID = "lbItemText" };
            //hiItemText = new HtmlInputHidden() { ID = "hiItemText" };
            spanClose = new HtmlGenericControl("span") { ID = "spanClose", InnerText = " ×" };

            this.Controls.Add(tbItemText);
            this.Controls.Add(hiItemValue);
            this.Controls.Add(lbItemText);
            this.Controls.Add(spanClose);
            //this.Controls.Add(hiItemText);
        }

        /// <summary>
        /// 初始化控件
        /// </summary>
        /// <param name="e"></param>
        protected override void OnInit(EventArgs e)
        {
            base.OnInit(e);
            
            spanClose.Attributes.Add("style", "cursor:pointer;display:none;10px;");

            this.addClick = string.IsNullOrEmpty(AddClick) ? this.ClientID + "_AddItem" : AddClick;
            this.closeClick = string.IsNullOrEmpty(CloseClick) ? this.ClientID + "_DeleteItem" : CloseClick;

            this.Page.ClientScript.RegisterClientScriptBlock(Page.GetType(), this.ClientID + "_registerScripts",
                @"
                <script type='text/javascript'>
                    
                    function " + this.addClick + @"() {
                        var txt = document.getElementById('" + tbItemText.ClientID + @"');
                        var span = document.getElementById('" + lbItemText.ClientID + @"');
                        var close = document.getElementById('" + spanClose.ClientID + @"');
                        txt.style.display = 'none';
                        span.innerHTML = txt.value;
                        
                        close.style.display = '';
                    }

                    function " + this.closeClick + @"() {
                        var txt = document.getElementById('" + tbItemText.ClientID + @"');
                        var span = document.getElementById('" + lbItemText.ClientID + @"');
                        var close = document.getElementById('" + spanClose.ClientID + @"');
                        var itemVal = document.getElementById('" + hiItemValue.ClientID + @"');
                        txt.style.display = '';
                        txt.value='';
                        itemVal.value='';  
                        span.innerHTML = '';
                        close.style.display = 'none';
                    }

                    function " + this.ClientID + @"_CheckVal()
                    {
                        var close = document.getElementById('" + spanClose.ClientID + @"');
                        var txt = document.getElementById('" + tbItemText.ClientID + @"');
                        var spanTxt=document.getElementById('" + lbItemText.ClientID + @"');
                        var hiVal=document.getElementById('" + hiItemValue.ClientID + @"');
                        if(txt.value!='')
                        {
                            " + this.addClick + @"()
                        }
                        else if(spanTxt.innerHTML=='')
                        {
                            hiVal.value='';
                            " + this.closeClick + @"()
                        }
                        else
                        {
                            close.style.display='';
                            txt.style.display='none';
                            txt.value='';
                        }
                    }
                </script>
            ");

            this.spanClose.Attributes.Add("onclick", CloseClick + "()");
            tbItemText.CssClass = this.TextCssClass;
            this.Page.ClientScript.RegisterStartupScript(Page.GetType(), this.ClientID+"ckval", this.ClientID + "_CheckVal();", true);
        }

        private string addClick;
        /// <summary>
        /// 添加键值对时触发的前端事件
        /// </summary>
        public string AddClick
        {
            get { return addClick; }
        }

        private string closeClick;
        /// <summary>
        /// 删除键值对时触发的前端事件
        /// </summary>
        public string CloseClick
        {
            get { return closeClick; }
        }

        /// <summary>
        /// 控件值
        /// </summary>
        public ListItem Value
        {
            get
            {
                return new ListItem(tbItemText.Text, hiItemValue.Value);
            }
            set
            {
                tbItemText.Text = value.Text;
                hiItemValue.Value = value.Value;
            }
        }

        /// <summary>
        /// 输入框的样式
        /// </summary>
        public string TextCssClass
        {
            get;
            set;
        }

        /// <summary>
        /// 输入框客户端id
        /// </summary>
        public string TextBoxClientID
        {
            get { return tbItemText.ClientID; }
        }

        /// <summary>
        /// 值控件客户端ID
        /// </summary>
        public string HiddenValueClientID
        {
            get { return hiItemValue.ClientID; }
        }
    }
}

 注：火狐不支持innerText属性，使用innerHTML