c#滑鼠點擊TextBox控制項後清空預設字型-完美解決方案

方案（一）

指令碼：

<script type="text/javascript" language="javascript">
        //得到焦點時觸發事件
        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>

 

調用樣本：

<tr align="center">
                  <td style="background-image:url('bg03.gif');background-position:center;background-repeat:no-repeat;height:69px">
                     <span style="color: #000000; font-family: 黑體;"><strong>使用者名稱:</strong></span><asp:textbox id="UserName" Text="請輸入使用者名稱" runat="server" Width="100px" Height="20px" ForeColor="#808080"
                                            OnFocus="onFocusFun(this,'請輸入使用者名稱')"
                                            OnBlur="onblurFun(this,'請輸入使用者名稱')"></asp:textbox>             
                     <br />
                     <span style="color: #000000; font-family: 黑體;"><strong>密&nbsp;&nbsp;碼:</strong></span><asp:textbox id="UserPass" runat="server" Width="100px" TextMode="Password" Height="20px"></asp:textbox>             
                  </td>
              </tr>

--------------------------------------------------------------------------------------------------------------------------------------------

方案（二）

[ 方法一]

前台代碼：

<div>
    <asp:TextBox ID="txtName" runat="server"></asp:TextBox>
    <asp:TextBox ID="txtPwd" runat="server"></asp:TextBox>
    <asp:Button ID="btnLongin" runat="server" Text="提交" />
</div>

後台代碼：

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

public partial class _Default : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        //使用者輸入
        txtName.Attributes.Add("Value", "請輸入使用者名稱");
        txtName.Attributes.Add("OnFocus", "if(this.value=='請輸入使用者名稱') {this.value=''}");
        txtName.Attributes.Add("OnBlur", "if(this.value==''){this.value='請輸入使用者名稱'}");
        //密碼輸入
        txtPwd.Attributes.Add("Value", "請輸入密碼");
        txtPwd.Attributes.Add("OnFocus", "if(this.value=='請輸入密碼'){this.value=''}");
        txtPwd.Attributes.Add("OnBlur", "if(this.value==''){this.value='請輸入密碼'}");

        //
        if (!IsPostBack)
        {
            //內容
        }
    }
}

 

[ 方法二]

前台文字框裡添加下面2個事件屬性：

OnFocus="javascript:if(this.value=='提示文字') {this.value=''}"

OnBlur="javascript:if(this.value=='') {this.value='提示文字'}"

-----------------------------------例-----------------------------------------

<asp:TextBox ID="txtName" runat="server" Text="請輸入使用者名稱"

OnFocus="javascript:if(this.value=='請輸入使用者名稱') {this.value=''}"

OnBlur="javascript:if(this.value==''){this.value='請輸入使用者名稱'}">

</asp:TextBox>

<asp:TextBox ID="txtPwd" runat="server" Text="請輸入密碼"

OnFocus="javascript:if(this.value=='請輸入密碼') {this.value=''}"

OnBlur="javascript:if(this.value==''){this.value='請輸入密碼'}">

</asp:TextBox>