Примера по-долу показва как при натискане на клавиш Enter в textarea, вместо преминаване на нов ред, събмитва формуляра. За по-лесно, използвам jQuery, макар че може да се направи и със стандартен Javascript.
Обяснение за HTML кода - формуляр с id = myForm и вички минимално необходими атрибути като method и action. За целите на примера, за да не се претрупва с HTML код, формуляра има само един елемент - textarea с име и id = description.
Обяснение за Javascript кода - включваме библиотеката jQuery и когато страницата се е заредила напълно, използваме т.н. event listener (радар, прихващащ събития, случили се в рамките на текущата страница) да следи за натиснат Enter в textarea-та, и когато това събитие се случи, да изпълни някаква функция. Ако функцията е създадена предварително, трябва само да и напишем името:
[js]$('#description').bind('keypress', myFunction);[/js]
Ако действието, което изпълнява функцията ще се ползва само на това място и никъде другаде, по-лесно е да се използва анонимна функция, като тази в примера
[js]$('#description').bind('keypress', function(e){
//js code goes here
});[/js]
Първия параметър в тази (callback, event handler) функция, съдържа обекта на съответното събитие и
цялата информация за него
Използвайки обекта на събитието, стигаме но номера на клавиша, който е натиснат. Правиме и една елементарна проверка за да сме сигурни, че данните в key са от тип целочислена стойност, та дори и да е нула, това е ОК.
Ако натиснатия клавиш е Enter (номер 13), изпълняваме нашия код, а в случая:
1. Чрез обета на събитието, спираме поведението на клавиша по подразбиране. По подразбиране, натискането на Enter в textarea води до нов ред, но нашата цел е submit на формуляра.
2. Откриваме формуляра чрез неговото id - $('#myForm') и го събмитваме. Резултата от това действие ще се появи под формуляра.
Код:
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
//bind the keypress event to the textarea element
$('#description').bind('keypress', function(e){
//be sure we have a number
var key = e.charCode ? e.charCode : e.keyCode ? e.keyCode : 0;
//enter key
if(key == 13){
//prevent default behaviour
e.preventDefault();
//submit the form
$('#myForm').submit();
}
});
});
</script>
</head>
<body>
<form method="post" action="enter.php" id="myForm">
<textarea name="description" id="description" rows="4" cols="40"></textarea>
</form>
<pre><?php if($_POST) print_r($_POST); ?></pre>
</body>
</html>