前置作業：
請自行下載JQuery檔案以及建置好開發ASP的環境。
重點在於如何使用JavaScript來計算使用者在輸入文字時，如何計算字數。
紅色字為重點
<%@CODEPAGE="65001"%>
<%
'輸出設定成UTF-8'
Response.CodePage = 65001
Response.CharSet = "utf-8"
'在使用傳統ASP時,為了避免使用者按"上一頁"看到Client的暫存網頁,通常會加上下列這三行'
Response.CacheControl = "no-cache"
Response.AddHeader "Pragma", "no-cache"
Response.Expires = -1
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>無標題文件</title>
<script type="text/javascript" src="js/jquery-2.0.2.min.js"></script>
<script type="text/javascript">
var str_factor=/(\s)|(\n)/g;
$(document).ready(function(){
//運用JQuery為input id=TB1加入keyup事件
$('#TB1').keyup(function(){
var Word_Number;
var str_temp2 = $('#TB1').val(); //取得input id=TB1的值
if (str_temp2.replace(str_factor, "").length==0) {
$("#SSWl").html(''); //將 div id=SSWl 文字清空
}else{
Word_Number=(str_temp2.replace(str_factor, "")).length;
$("#SSWl").html('目前字數：'+Word_Number);
$('#showmsg').html($('#TB1').val());
}
});
});
function checkform(){
var str_temp = "";
if ($('#TB1').val() == '' || $.trim($('#TB1').val()).length - 1 == -1) {
alert('未填寫');
return false;
} else {
str_temp = $('#TB1').val();
if ((str_temp.replace(str_factor, "")).length < 10) {
alert('字數小於10個字,\n必須至少10個字');
return false;
}else if ((str_temp.replace(str_factor, "")).length > 10){
if ((str_temp.replace(str_factor, "")).length > 50){
alert('字數最多不能大於50個字');
return false;
}
}
}
window.document.f1.submit();
}
</script>
</head>
<body>
<%
TB1=Request.Form("TB1")
if NOT ISEmpty(TB1) then
Response.write "NOT Empty<br />"
str_temp=replace(TB1,vbcrlf,"" )
str_temp=replace(str_temp," ","" )
Response.write "長度="& len(str_temp) & ";" & str_temp ' 空白符號
else
Response.write "Empty"
end if
%>
<div id="SSWl"></div>
<form method="post" name="f1" id="f1" action="test_TextBox.asp" enctype="application/x-www-form-urlencoded">
<textarea name="TB1" id="TB1" style="width: 450px; height: 180px"></textarea>
<input type="submit" value="送出" onclick="javascript:checkform();"/>
</form>
<br />
<span id="showmsg">?</span>
</body>
</html>
沒有留言:
張貼留言