jQuery Ctrl+Enter İle Post İşlemi
Twitter Google gibi büyük sitelerde görmüşünüzdür ctrl+enter ile tweet gönderme,mesaj gönderme, gmailde mail gönderme işlemi falan yapılabiliyor. bugün buna benzer bir örnek paylaşacağım size.
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
<!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>
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.