<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js"></script>
<script>
$(document).ready(function(){
	$('#Wish').keyup(function(){
		var max = parseInt($(this).attr('maxlength'));
		if($(this).val().length > max){
			$(this).val($(this).val().substr(0, $(this).attr('maxlength')));
		}
		$('#WishMax').html('เหลืออีก ' + (max - $(this).val().length) + ' ตัวอักษร');
	});
});
</script>
 
<textarea name="Wish" id="Wish" maxlength="10"></textarea>
<div id="WishMax"></div>
 

แต่ถ้าทำให้เป็น popup น่าจะดีกว่า เพราะจำกัดการแสดงผลได้ และผู้ใช้จะปิด popup ได้ง่ายกว่า ผมว่าถ้าจะทำอะไรแล้วต้องทำให้ดีที่สุด นอกจากจะเป็น popup แล้วก็ยังต้องการให้อยู่กลางจอด้วยเพื่อความสวยงาม มาดูตัวอย่างกันครับ

function submitPopup (objForm,W,H,S) {
	// W = width, H = height, S = scrollbar
	var winleft	=	(screen.width - W) / 2;
	var winup	=	(screen.height - H) / 2;
	winProp		=	'width='+W+',height='+H+',left='+winleft+',top='+winup+',scrollbars='+S+',resizable' + ',status=yes'
 
	objForm.target = "newPopup";
	window.open('', "newPopup", winProp);
	objForm.submit();
}

ตัว function javascript ด้านบน ทำงานดังนี้
1. คำนวณตำแหน่งกลางจอ
2. ทำการสร้าง popup ขึ้นมามีชื่อว่า newPopup
3. สั่ง submit form

 
<form action="/path/to/script.php" method="post" name="frmTest" id="frmTest" target="newPopup">
<input type="text" value="test" name="test" id="test">
<input type="button" value="Submit" name="Submit" id="Submit" onClick="submitPopup(document.frmTest,300,400,'no');">
<a href="javascript:submitPopup(document.frmTest,300,400,'no');">Submit</a>
</form>
 

คำสั่ง html ทำงานดังนี้
1. เมื่อกดปุ่ม Submit หรือ click link ที่คำว่า Submit จะไปเรียก function submitPopup() ของ javascript ให้ทำงานโดยส่ง parameter ไป 4 ตัว
2. จุดสังเกตุคือ target="newPopup" ใน tag form จะชื่อเดียวกับ popup ที่สร้างใหม่จาก javascript นั่นเอง เพราะถ้าเราใส่ชื่อ target ที่ไม่มีอยู่จริงมันจะเด้งเป็นหน้าใหม่ แต่ว่าตัว javascript ไปดักสร้าง popup ชื่อว่า newPopup ไว้ทำให้ form ถูก submit ไปยัง popup ดังกล่าวนั่นเอง

การทำงานคือ หน้าต่างหลักมี text field อยู่ พอกดปุ่มจะเปิด popup ขึ้นมาโดยจะมี textarea
เพื่อกรอกข้อมูล พอกดปุ่ม submit ค่าที่อยู่ใน textarea จาก popup จะไปอยู่ใน text field
ตัวหน้าต่างหลัก, แปลงจากขึ้นบรรทัดใหม่เป็น : แทน และ popup ปิดตัวเอง ตามรูป

ขออธิบายส่วนที่น่าสนใจแล้วกันนะครับ

ไฟล์ test.html (หน้าต่างหลัก)

 
// function นี้มีไว้เพื่อสร้าง popup ให้อยู่กลางจอเสมอ
function popUpWindow(URL, N, W, H, S) { // name, width, height, scrollbars
var winleft    =    (screen.width - W) / 2;
var winup    =    (screen.height - H) / 2;
winProp        =    'width='+W+',height='+H+',left='+winleft+',top=' +winup+',scrollbars='+S+',resizable' + ',status=yes'
Win            =    window.open(URL, N, winProp)
if (parseInt(navigator.appVersion) >= 4) { Win.window.focus(); }
}
function popUpTextArea() {
// สั่งสร้าง popup จากการกดปุ่มที่หน้าต่างหลัก
popUpWindow('popup_textarea.html','SH1',340,130,'no');
}
 

ไฟล์ popup_textarea.html

 
// เมื่อกดปุ่ม Set Value ที่ popup จะอ่านค่าจาก textarea มา
// และแปลงจาก \n (ขึ้นบรรทัดใหม่) เป็น :
function setContent () {
var strContent = document.frmSelect.tbTextArea.value;
strContent = replaceString(strContent,'\n',':');
// window.opener ก็คือตัวที่เปิดมันขึ้นมานั่นเอง
window.opener.document.frmTest.tbTest.value=strContent;
window.close();
}
// เอาไว้ replace ข้อความใน string ตามต้องการ
function replaceString (strString,strFind,strReplace) {
while (strString.indexOf(strFind)>-1) {
intPosition= strString.indexOf(strFind);
strString = '' + (strString.substring(0, intPosition) + strReplace +
strString.substring((intPosition + strFind.length), strString.length));
}
return strString;
}
 

ลองของจริงโดยการ ดาวน์โหลดไฟล์ที่นี่