[ASP.NET 自訂控制項]TextBox自訂屬性控制文字以全形或半形呈現

  • 9385
  • 0

[ASP.NET 自訂控制項]TextBox自訂屬性控制文字以全形或半形呈現

如題,轉全形半形這個需求幾乎只有在中文世界用的到。然而在.NET的VB類別裡,Strings.StrConv(),是有支援全形半形轉換的。

但是這樣通常還不能滿足客戶的需求,客戶要的是在TextBox上Key in完,就要轉形,即使是複製貼上後也要能夠轉形,這時候還是靠javascript最方便。

 

所以這邊介紹一下,自訂一個屬性來控制該TextBox的文字要以全形還是半形來呈現。NoSet為不做處理,保留原本文字型態。

 

Step1:

我們一樣先新增一個類別庫專案,名稱假設叫做Joey,新增一個類別,叫做JoeyTextBox。


Namespace Joey
       Public Class JoeyTextBox
           Inherits TextBox
           

       End Class
End Namespace

 

Step2:

新增一個列舉型別,叫做ConvertWideNarrowType,來供外界設定要以什麼型態呈現文字。


    ''' <summary>
    ''' TextBox值是否要轉為全形或半形
    ''' </summary>
    ''' <remarks></remarks>
    Public Enum ConvertWideNarrowType
        NoSet = 0
        Wide = 1
        Narrow = 2
    End Enum

 

Step3:

新增一個屬性,叫做ConvertWideNarrow。


        ''' <summary>
        ''' TextBox值是否要轉為全形或半形
        ''' </summary>
        ''' <value></value>
        ''' <returns></returns>
        ''' <remarks></remarks>
        Public Property ConvertWideNarrow() As ConvertWideNarrowType
            Get
                If Me.ViewState.Item("ConvertWideNarrow") Is Nothing Then
                    Return ConvertWideNarrowType.NoSet
                Else
                    Return CType(Me.ViewState.Item("ConvertWideNarrow"), ConvertWideNarrowType)
                End If
            End Get
            Set(ByVal Value As ConvertWideNarrowType)
                Me.ViewState.Item("ConvertWideNarrow") = Value
            End Set
        End Property

 

Step4:

在OnPreRender事件時,註冊javascript,並將文字轉形。


Protected Overrides Sub OnPreRender() Overrides Sub OnPreRender(ByVal e As System.EventArgs)
    MyBase.OnPreRender(e)
    
    '全形    
		If Me.ConvertWideNarrow = ConvertWideNarrowType.Wide Then
				Me.Text=Strings.StrConv(Me.Text, VbStrConv.Wide)
		    Page.ClientScript.RegisterClientScriptInclude("ConvertType","TestJavaScript.js")
		    Me.Attributes.Add("onKeyUP", "unAsc(event,'" + Me.ClientID  + "')");
		'半形
		ElseIf Me.ConvertWideNarrow = ConvertWideNarrowType.Narrow Then
				Me.Text=Strings.StrConv(Me.Text, VbStrConv.Narrow)
		    Page.ClientScript.RegisterClientScriptInclude("ConvertType","TestJavaScript.js")
		    Me.Attributes.Add("onKeyUP", "Asc(event,'" + Me.ClientID  + "')");
		End If 
		
End Sub

 

 

Step5:

接著在TestJavaScript.js裡面,加上要轉形的function。(這邊全形半形轉換,是透過查表)


//符號 英文半形全形對照表
    var asciiTable = "!\"#$%&\'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRSTUVWXYZ[\\]^_`abcdefghijklmnopqrstuvwxyz{|}~"; 
    var big5Table = "%uFF01%u201D%uFF03%uFF04%uFF05%uFF06%u2019%uFF08%uFF09%uFF0A%uFF0B%uFF0C%uFF0D%uFF0E%uFF0F%uFF10%uFF11%uFF12%uFF13%uFF14%uFF15%uFF16%uFF17%uFF18%uFF19%uFF1A%uFF1B%uFF1C%uFF1D%uFF1E%uFF1F%uFF20%uFF21%uFF22%uFF23%uFF24%uFF25%uFF26%uFF27%uFF28%uFF29%uFF2A%uFF2B%uFF2C%uFF2D%uFF2E%uFF2F%uFF30%uFF31%uFF32%uFF33%uFF34%uFF35%uFF36%uFF37%uFF38%uFF39%uFF3A%uFF3B%uFF3C%uFF3D%uFF3E%uFF3F%u2018%uFF41%uFF42%uFF43%uFF44%uFF45%uFF46%uFF47%uFF48%uFF49%uFF4A%uFF4B%uFF4C%uFF4D%uFF4E%uFF4F%uFF50%uFF51%uFF52%uFF53%uFF54%uFF55%uFF56%uFF57%uFF58%uFF59%uFF5A%uFF5B%uFF5C%uFF5D%uFF5E"; 
  
  //onKeyUP,轉全形
    function unAsc(event,objID) 
   {       
        if(window.event.keyCode>36 && window.event.keyCode<41 ){				    
			return;
        }
        else{
            var objTxt = document.getElementById(objID);  
            objTxt.value=unAscValue(objTxt.value);
        }       
   }
    
    //onKeyUP,方向鍵不作處理,轉半形
    function Asc(event,objID)
    {
        if(window.event.keyCode>36 && window.event.keyCode<41 ){				    
					    return;
        }
        else{
            var objTxt = document.getElementById(objID);   
            var text=event.srcElement.value;
            if(text==null ){				    
			    return;
            }
            
            var result = "";
            for (var i = 0; i < text.length; i++) {
                var val = escape(text.charAt(i));
                var j   = big5Table.indexOf(val);
                result += (((j > -1) && (val.length == 6)) ? asciiTable.charAt(j / 6) : text.charAt(i));
            }
            objTxt.value=result;
            return result;
        }
    
    }

    //轉全形
    function unAscValue(vstrValue) 
   {                  
            var text=vstrValue;
            var result = ""; 
            for ( var i = 0 ; i < text.length ; i ++ ) 
            { 
            var val = text.charAt(i) ;             
            var j = asciiTable.indexOf(val) * 6 ;         
            result += ( j > -1 ? unescape(big5Table.substring( j , j + 6 ) ) : val );     
            } 
           
            return result;         
        
}

 

Step6:

大功告成,接著只需建置類別庫,就會產生一顆Joey.dll。在網站裡加入參考Joey.dll之後,工具箱就會多一個JoeyTextBox。

將JoeyTextBox拖曳至頁面上,即可設定ConvertWideNarrow屬性,

設定為Wide則轉全形;設定為Narrow,則轉半形;預設為NoSet,不轉形。


blog 與課程更新內容,請前往新站位置:http://tdd.best/