Mantık şu normal bir html formumuz var ve biz kullanıcı ctrl ve enter tuşuna aynı anda basmışmı bunu kontrol ettiriyoruz eğer basmışsa form ile ilgili işlemlerimizi yapıyoruz.
Hemen Örneğimizi Paylaşayım:
ctrl+enter post işlemi
[html]
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title></title>
<meta name="description" content=" " />
<meta name="keyword" content=" " />
<meta name="author" content="Vehbi Akdogan" />
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js'></script>
<script type="text/javascript">
$(function(){
$.formPost = function(){
// burda ajax ile formunuzu post ettirebilirsiniz ama ben şuan ajax kullanmayacağım
var mesaj = $.trim($("#mesaj").val());
if(mesaj != "") {
$(".mesajlar").append(' <div class="mesaj">'+ mesaj +'</div>');
$("#mesaj").val("");
}
}
$(window).keypress(function(event){
// bir tuşa tıklandığında bu fonksiyonumuz çalışacak
if(event.which == 10 && event.ctrlKey) // enter ve ctrl ye aynı anda basılmışmı diye kontrol ediyoruz
$.formPost(); // basılmışsa post işlemi gerçekleşsin
});
});
</script>
<style type="text/css">
.mesaj {
width:100%;
padding:5px;
box-sizing: border-box;
-webkit-box-sizing: border-box;
border-bottom:1px dashed #ddd;
margin-bottom:5px;
}
button,textarea {
display:block;
margin-top:5px;
}
.mesajlar {margin-top:20px;}
</style>
</head>
<div style="width:500px;margin:0 auto">
<form action="#" method="post" id="forms">
<label>Mesajınız</label>
<textarea name="mesaj" id="mesaj" cols="30" rows="10"></textarea>
<button type="post">Gönder</button>
</form>
<div class="temizle"></div>
<div class="mesajlar"></div>
</div>
</body>
</html>
[/html]
Sayfada birden fazla formunuz olabilir bunun içinde kullanıcının hangi formda olduğunu bulmak için diyelimki 1. formda textarea nın içinde onu target methodu ile alıp parent methodu ile de forma geçiş yapabilirsiniz. geliiştirmek size kalmış ama temel mantık yukarıdaki yaptığım şekilde işliyor.
DEMO
Hiç yorum yok:
Yorum Gönder