Posted By

luizlopes on 07/19/11

Tagged

Versions (?)

Last Edited at 07/19/11 05:49am

Statistics

Viewed 893 times

Favorited by 0 user(s)

Related snippets

Submit Form with Control + Enter

/ Published in: HTML

I took this out of an example in tutsplus, and I added a fadeIn action for aesthetic reasons.

Highlighted TextExpand

<!DOCTYPE HTML> 
<html> 
<head> 
    <meta http-equiv="content-type" content="text/html; charset=utf-8"> 
 
    <title>Text Box Enter</title> 
    <style type="text/css" media="screen"> 
        body {
            font: 16px/1.5 helvetica-neue, helvetica, arial, san-serif;
        }
        textarea {
            border: 1px solid #ccc;
            display: block;
            width: 250px;
            height: 100px;
        }
        p {
            border: 1px solid #ccc;
            background: #ececec;
            padding: 10px;
            margin: 10px 0;
            width: 230px;
        }
        button {
            border: 1px solid #ccc;
            background: #ececec;
            -webkit-border-radius: 3px;
            -moz-border-radius: 3px;
            margin-top: 10px;
            padding: 5px 20px;
        }
    </style> 
</head> 
<body> 
    <textarea name="msg" id="msg" placeholder="Your Message" autofocus="true"></textarea> 
    <button type="submit">Post</button> 
    <script type="text/javascript" charset="utf-8" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script> 
    <script type="text/javascript" charset="utf-8"> 
        $.fn.ctrlEnter = function (btns, fn) {
            var thiz = $(this);
                btns = $(btns);
        
            function performAction (e) {
                fn.call(thiz, e);
            };
            thiz.bind("keydown", function (e) {
                if (e.keyCode === 13 && e.ctrlKey) {
                    performAction(e);
                    e.preventDefault();
                }
            });
            btns.bind("click", performAction);
        }
 
        $("#msg").ctrlEnter("button", function () {
                $("<p class='post'></p>").append(this.val().replace(/\n/g, "<br/>")).fadeIn('slow').prependTo(document.body);
                this.val("");
                });
 
    </script> 
</body> 
</html>

URL: http://net.tutsplus.com/tutorials/javascript-ajax/how-to-submit-a-form-with-control-enter/

Report this snippet Tweet