[ASP.net WebForm] TextBox在多行模式下的Warp

2011-08-07


    <br />
    <asp:Button ID="Button1" runat="server" OnClick="Button1_Click" Text="Button" />
    <br />
    <asp:Label ID="Label1" runat="server" Text="Label" Width="150px"></asp:Label>

先看一般情況下，TextBox多行模式，使用者按下Enter斷行後

Label控制項該如何顯示相對應的文字


    {

        Label1.Text = TextBox1.Text.Replace("\n", "<br/>");//把\n換成Environment.NewLine也可以
    }

執行結果：

(使用者輸入 a=>Enter鍵=>b)

使用者按下Button：

(呈現結果正確)

OK，這樣沒問題，但因為TextBox的Warp成員(自動斷行)一般都是設True讓文字超過TextBox寬度時自動換行

所以例如使用者連續輸入aaaaaaaaaaaaaaaaa…

這時候再按下Button的結果：

↑以上的Label控制項顯示的文字就沒有斷行效果了

用











觀察以上兩種情況：

(使用者自行按Enter鍵的情況)



使用者都沒自行按Enter鍵，而交由TextBox的Warp成員自己斷行的情況：





 

以上可以推論TextBox的Warp成員自動斷行，似乎只是改變呈現結果，並不會真的加一個斷行符號

所以論壇上有人這樣發問了：要如何讓TextBox輸入的不斷行內容正確顯示(意思就是TextBox1自動幫輸入的文字斷行的話，要如何交由Label正確呈現出來)

 

這邊紀錄一下解法：


  

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
  <title></title>
  <script src="js/jquery-1.4.1.min.js" type="text/javascript"></script>
  <script type="text/javascript">

    $(document).ready(init);

    function init() {

      $("#<%= TextBox1.ClientID %>").keydown(TextBox1KeyDown);

    }

    var warpLength = 6; //每6個字就斷行
    var warpPosition = 6; //斷行位置
    var warpCount = 0; //斷行字元個數
    function TextBox1KeyDown(e) {
      if (e.which == 8) {//按下Backspace鍵
        $("#<%= TextBox1.ClientID %>").val(""); //全部文字都清除
        warpPosition = 6; //預設斷行位置
        warpCount = 0; //預設斷行字元個數
      }


      var currentText = $("#<%= TextBox1.ClientID %>").val(); //取得TextBox的文字
      var currentLength = currentText.length; //取得TextBox的輸入文字長度(含斷行字元)

      if (warpCount != 0) {//取得真正純文字的長度
        currentLength = currentLength - warpCount;
      }
      if (currentLength != 0 && (currentLength % warpPosition == 0)) {

        var text = $("#<%= TextBox1.ClientID %>").val() + "\n"; //最後一個字加上斷行符號
        $("#<%= TextBox1.ClientID %>").val(text);
        warpPosition = warpPosition + warpLength; //下一次要斷行的位置
        warpCount++; //已加一個\n的斷行符號
      }

    }
    
  </script>
</head>
<body>
  <form id="form1" runat="server">
  <asp:TextBox ID="TextBox1" runat="server" TextMode="MultiLine" Width="150px"></asp:TextBox>
  <br />
  <asp:Button ID="Button1" runat="server" OnClick="Button1_Click" Text="Button" />
  <br />
  <asp:Label ID="Label1" runat="server" Text="Label" Width="150px"></asp:Label>
  </form>
</body>
</html>




 


  

  {
    Label1.Text = TextBox1.Text.Replace("\n", "<br/>");//把\n換成Environment.NewLine也可以
  }



不過這種解法仍舊不完美：

當使用者在TextBox1中按下Backspace鍵，可能有幾種情況

1.反白部份文字按Backspace鍵

2.未反白文字直接按Backspace鍵

這邊我是當User按下Backspace鍵時，一律清空TextBox1的文字

另外，User也有可能從別處Copy一段文字，然後貼到這裡的TextBox1，這裡的處理就不知道該怎麼辦了…

以上算硬寫出來的解法就是