私人公開筆記本: HTML

2013年8月20日星期二

Html div 水平垂直置中

今日在Google找資料key入了關鍵字:div 水平垂直置中，找到了以下這篇資料
CSS 教學 – 設定一個 div 水平置中和垂直置中
此篇是以圖片來做教學示範，所以您有需要可以看此篇，但建議您先看此篇，講解比較清楚。

而我今日想在網頁中將文字水平垂直置中，那麼要怎麼設定Html div標籤呢，因為文字在div標籤中會改變height、width，那如果將來要修改div裡面的文字這樣以後一定又要修改CSS或Html碼，所以自己就利用JQuery來計算位置自動去調整div位置，這樣將來就不需要修改CSS或Html碼，即使div增加了文字也不需要去調整。

前置作業：
　　請自行到JQuery下載jquery-2.0.2.min.js

以下是Code，註解都在程式碼中，在此不再作解釋
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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>div水平垂直置中</title>
<style type="text/css">
body {
background-color: #EEE; /*背景色*/
}
.BOX {
border: 2px solid #444;
box-shadow: 5px 5px 5px #666;

position:absolute; /*position制定位置*/
top:50%; /* top 座標為 50% */
left:50%; /* left 座標為 50% */
}
</style>

<script type="text/javascript" src="js/jquery-2.0.2.min.js"></script>
<script type="text/javascript">
$(function () {
var h=$('#divbox').height(); //取得div標籤,id為divbox的高度
var w=$('#divbox').width(); //取得div標籤,id為divbox的寬度
//計算位移margin-top,margin-left數值
var margin_top=-(h/2);
var margin_left=-(w/2);

//為div標籤,id是divbox加入CSS
$('#divbox').css({'margin-top':margin_top,'margin-left':margin_left});
});
</script>
</head>
<body>

<div class="BOX" id="divbox">
<h1 style=" text-align:center;">
目前網頁未開放<br />
Current page is not open.
</h1>
</div>
</body>
</html>

2013年7月23日星期二

ASP.NET、HTML 限制TextBox輸入的資料

重點紀錄與整理：實作TextBox限制使用者只能輸入英文及數字符號、限制使用者不能剪下複製貼上、運用css限制TextBox使輸入法失效。

Default5.aspx
<%@ Page Language="VB" AutoEventWireup="false" CodeFile="Default5.aspx.vb" Inherits="Default5" %>

<!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 runat="server">
<script src="jquery-2.0.1.min.js"></script>
<script>
$(function () {
$('#TextBox1').bind('cut copy paste', function (e) {
e.preventDefault(); //取消動作
alert('禁止剪下複製貼上');
});
$('#Html_TextBox').bind('cut copy paste', function(e) {
e.preventDefault(); //取消動作
alert('禁止剪下複製貼上');
});
});
</script>
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
實作TextBox限制只能輸入英文及數字符號、限制使用者不能剪下複製貼上、運用css限制TextBox使輸入法失效<br />
以下為ASP.NET TextBox控制項<br />
<asp:TextBox ID="TextBox1" runat="server" Height="110px" style="ime-mode:Disabled;"
TextMode="MultiLine" Width="276px"></asp:TextBox><br />
以下為HTML TextBox多行輸入控制項<br />
<textarea rows="10" style="width: 271px;ime-mode:Disabled;" id="Html_TextBox" onkeyup="value=value.replace(/^a-zA-Z0-9/)"></textarea>
<asp:Button ID="Button2" runat="server" Text="Button" />
</div>
</form>
</body>
</html>

Default5.aspx.vb
Partial Class Default5
Inherits System.Web.UI.Page

Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
'為ASP.NET TextBox控制項加入客戶端onkeyup事件用運javascript的replace函式搭配正規表示式來限制使用者輸入的資料
TextBox1.Attributes("onkeyup") = "value=value.replace(/^a-zA-Z0-9/)"
End Sub

End Class

說明
1. style="ime-mode:Disabled;" 利用CSS來限制使用者僅能輸入英文和數字及符號；其實在程式碼當中也有寫到JavaScript語法的replace函式來限制使用者僅能輸入英文和數字及符號，在這裡就看您想用哪一種方法來限制使用者所輸入的資料

資料來源：
[jQuery] TextBox中禁止剪下複製貼上
輕鬆解決網頁只能輸入英數字的問題

2013年8月20日 星期二

Html div 水平垂直置中

2013年7月23日 星期二

ASP.NET、HTML 限制TextBox輸入的資料

2013年8月20日星期二

2013年7月23日星期二