<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>brm - odoslanie formuláru cez Shift + Enter a jQuery</title>
<link rel="stylesheet" href="../assets/ViewSourceButton/css/prettify.css">
<style>
body { background: #e3e3e3; font: 12px/15px Tahoma; color: #555; margin: 0; }
form { width: 350px; margin: 75px auto; }
img { border: 0; }
.back { background: #444; margin: 0; padding: 15px; font-size: 11px; }
.back a { color: #afafaf; text-decoration: none; }
.back a:hover { color: #ccc; }
.back strong { border-bottom: 1px dotted #777; }
h1 { margin-bottom: 15px; text-shadow: 1px 1px 0px #f3f3f3; }
h2 { font-size: 12px; color: #999; font-weight: normal; }
input, textarea {
display: block; margin-bottom: 15px; padding: 7px; background: #fafafa;
border: 1px solid; border-color: #ccc #fcfcfc #fcfcfc #ccc;
border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px;
}
textarea { width: 330px; height: 75px; }
input[type=submit] {
width: 75px; cursor: pointer; border-color: #fcfcfc #ccc #ccc #fcfcfc;
color: #555; font: bold 11px Tahoma; display: inline;
box-shadow: 1px 1px 1px #ddd; -moz-box-shadow: 1px 1px 1px #ddd; -webkit-box-shadow: 1px 1px 1px #ddd;
}
input[type=submit]:hover { border-color: #999; }
form p { margin: 5px 3px; padding: 10px 0 4px 0; border-top: 1px dotted #999; font-size: 11px; }
form span { color: #999; margin-left: 10px; }
pre { font-family: monospace; white-space: pre-wrap; }
#source-code { display: none; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(255,255,255,0.8); }
#source-code:target { display: block; }
#source-code pre { padding: 20px; font: 14px/1.6 Monaco, Courier, MonoSpace; margin: 50px auto; background: rgba(0,0,0,0.8); color: white; width: 80%; height: 80%; overflow: auto; }
#source-code pre a, #source-code pre a span { text-decoration: none; color: #00ccff !important; }
#x { position: absolute; top: 30px; left: 10%; margin-left: -41px; }
.button { background: #FF7200; opacity: .95; padding: 5px 10px; color: white; text-decoration: none; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; position: absolute; top: 10px; right: 10px; }
.button:hover { opacity: 1; }
</style>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script>!window.jQuery && document.write('<script src="../assets/jquery.js"><\/script>')</script><script src="../assets/jquery.js"></script>
<script src="../assets/ViewSourceButton/prettify/prettify.js"></script>
<script>
$(function()
{
var form = $('#form'); // zmenit podla potreby
// odoslanie pomocou shift+enter
form.keydown(function(e)
{
if (e.keyCode == 16) form.data('shiftPressed', true);
}).keyup(function(e)
{
if (e.keyCode == 16) form.data('shiftPressed', false);
}).keypress(function(e)
{
if (e.keyCode == 13 && form.data('shiftPressed'))
{
form.submit();
return false; // zabrani aby sa enter napisal
}
});
// po odoslani formularu
form.submit(function()
{
var text = $.trim(form.find('textarea').val());
if (text) form.append( $('<p/>').html( text ) );
return false;
});
})
</script>
</head>
<body>
<p class="back"><a href="https://brm.sk/247/odoslanie-formularu-cez-shift-enter-a-jquery">< späť na článok <strong>odoslanie formuláru cez Shift + Enter a jQuery</strong></a></p>
<form id="form" action="" method="post">
<h1>napíš niečo a odošli</h1>
<h2>ideálne pomocou shift + enter ;)</h2>
<textarea id="text" name="text"></textarea>
<input type="submit" value="odošli"> <span>/ shift + enter</span>
</form>
<a class="button" href="#source-code" id="view-source">Fancy View Source</a>
<div id="source-code">
<a href="#" id="x"><img src="http://css-tricks.com/examples/ViewSourceButton/images/x.png" alt="close"></a>
</div>
<script>
/**
* fancy view source
* http://css-tricks.com/make-a-view-source-button/
*/
$(function() {
$("<pre />", {
"html": '<!DOCTYPE html>\n<html>\n' +
$("html")
.html()
.replace(/[<>]/g, function(m) { return {'<':'<','>':'>'}[m]})
.replace(/((ftp|http|https):\/\/(\w+:{0,1}\w*@)?(\S+)(:[0-9]+)?(\/|\/([\w#!:.?+=&%@!\-\/]))?)/gi,'<a href="$1">$1</a>') +
'\n</html>',
"class": "prettyprint"
}).appendTo("#source-code");
prettyPrint();
});
</script>
</body>
</html>