ASP.net Textbox的使用方法

最後更新：2017-01-13 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

TextBox控制項用來建立一個可供使用者輸入文本的文字框。

TextBox的屬性和特性列在我們的web控制項參考手冊中。

下面的例子示範了你可能會用到的TextBox控制項的一些屬性：

<html>
<body>

<form runat="server">

基本的TextBox：
<asp教程:TextBox id="tb1" runat="server" />
 

用於輸入密碼的TextBox：
<asp:TextBox id="tb2" TextMode="password" runat="server" />
 

帶有文本的TextBox：
<asp:TextBox id="tb4" Text="Hello World!" runat="server" />
 

多行的TextBox：
<asp:TextBox id="tb3" TextMode="multiline" runat="server" />
 

具有高度的TextBox：
<asp:TextBox id="tb6" rows="5" TextMode="multiline"
runat="server" />
 

具有寬度的TextBox：
<asp:TextBox id="tb5" columns="30" runat="server" />

</form>

</body>
</html>

大家在做Web開發的時候，可能也會遇到之前我所遇到的問題，在使用TextBox控制項時，控制項的邊緣不能被背景圖片完全覆蓋掉，如圖1：

因為Textbox解析後也是html—Text控制項，而Text控制項是預設有邊，即是border:1px solid #000;

所以只要為Textbox控制項加上如下的一小句CSS就可以了，即是“border:0px”，最後效果如圖2：

②、大家在做Web開發時，不知道大家有沒有發現，當將Textbox控制項的TextMode = "MultiLine"，其實MaxLength已經失效了。

因為Textbox的屬性TextMode為"MultiLine"時，其實解析過後是html—textarea控制項，這個html控制項是沒有MaxLength屬性的。

如果這時還想限制其輸入長度：可以設定如下屬性：

<asp:TextBox ID = "reply_note" runat = "server" TextMode = "MultiLine" onkeyup="this.value = this.value.slice(0, 1000)">

③、大家在做某些輸入框時，可能希望做到得到焦點時觸發某個事件，失焦時觸發某個事件：

我寫了兩個JS剛好滿足了如下效果：

  
   
    <script type="text/網頁特效">
　　//得到焦點時觸發事件
　　function onFocusFun(element, elementValue) {
　　    if (element.value == elementValue) {
　　        element.value = "";
　　        element.style.color = "";
　　    }
　　}

　　//離開輸入框時觸發事件
　　function onblurFun(element, elementValue) {
　　    if (element.value == '') {
　　        element.style.color = "#808080";
　　        element.value = elementValue;
　　    }
　　}
　　</script>

然後，如下在Textbox控制項中引用它們就可以了：

  
   
    <asp:TextBox ID = "reply_note" runat = "server" Text="文章回複,輸入字數限制為1000字" ForeColor = "#808080"  OnFocus="onFocusFun(this,'文章回複,輸入字數限制為1000字')"
    OnBlur="onblurFun(this,'文章回複,輸入字數限制為1000字')"></asp:TextBox>

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More

ASP.net Textbox的使用方法

聯繫我們

A Free Trial That Lets You Build Big!

Sales Support

After-Sales Support