本次的這個範例主要是jQuery，但也有用到asp.net的元件。
這個範例是這樣的：
1、有預設顯示數值
2、雙點擊清除已輸入文字
結論：
1、placeholder在操作<asp:TextBox>、<input type=”text”>操作大致相同
2、ondblclick、ondblclick這二個的做法差不多，都是接jquery函式
3、aspx元件可以在jquery讀取與給值，例如$(‘#<%=TextBox1.ClientID%>’).val(“”);
4、<asp:TextBox>、<input type=”text”>這二個元件各有所長，<asp:TextBox>可以處理後端資料，<input type=”text”>多半只能透過ajax的方式進行。asp元件選擇比較多，也比較容易達到安全方面的要求。
5、asp的按鈕和下拉選單會postback，這個時候input按鍵就能派上用場，因為它沒有postback，可以拿來做一些不會postback的動作
<%@ Page Language=”C#” AutoEventWireup=”true” CodeFile=”Default.aspx.cs” Inherits=”_Default” %>
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head id=”Head1″ runat=”server”>
<title>test</title>
<script type=”text/javascript” src=”//code.jquery.com/jquery-1.10.2.js”></script>
<style>
/* 頁面滿版設定 */
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
</style>
<script type=”text/javascript”>
//清除查詢
function textClear() {
$(‘#<%=TextBox1.ClientID%>’).val(“”);
}
function textClear2() {
$(‘#txtInput’).val(“”);
}
</script>
</head>
<body>
<form id=”form1″ runat=”server”>
<div>
<asp:TextBox ID=”TextBox1″ runat=”server” ondblclick=”textClear()” placeholder=”範例一TextBox” ></asp:TextBox>
<br/>
<input type=”text” id=”txtInput” ondblclick=”textClear2()” placeholder=”範例二input” />
</div>
</form>
</body>
</html>
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head id=”Head1″ runat=”server”>
<title>test</title>
<script type=”text/javascript” src=”//code.jquery.com/jquery-1.10.2.js”></script>
<style>
/* 頁面滿版設定 */
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
</style>
<script type=”text/javascript”>
//清除查詢
function textClear() {
$(‘#<%=TextBox1.ClientID%>’).val(“”);
}
function textClear2() {
$(‘#txtInput’).val(“”);
}
</script>
</head>
<body>
<form id=”form1″ runat=”server”>
<div>
<asp:TextBox ID=”TextBox1″ runat=”server” ondblclick=”textClear()” placeholder=”範例一TextBox” ></asp:TextBox>
<br/>
<input type=”text” id=”txtInput” ondblclick=”textClear2()” placeholder=”範例二input” />
</div>
</form>
</body>
</html>