Ctrl+Enter Post Function

by openwab

HTML

<div class="wrapper">
            <h1>Mon formulaire HTML</h1>
            <p class="subtitle">Comment poster un formulaire avec Ctrl+Enter ?</p>
            <div class="msg-loader"></div>
            <textarea id="msg"></textarea>
            <button type="submit">Post</button>
</div>

CSS

body {
                font: 14px/1.5 helvetica-neue, helvetica, arial, san-serif;
            }
            .wrapper {
                width:60%;
                text-align:center;
                margin:auto;
            }
            textarea {
                border: 1px solid #ccc;
                display:block;
                width: 250px;
                height: 100px;
                margin:auto;
            }
            p.msg {
                border: 1px solid #ccc;
                background: #ececec;
                padding: 10px;
                margin: 10px 0;
                width: 230px;
                margin:1em auto;
                text-align:left;
            }
            .msg-loader {
            }
            button {
                border: 1px solid #ccc;
                background: #ececec;
                -webkit-border-radius: 3px;
                padding: 5px 20px;
                margin-top:10px;
            }
            time {
                display:block;
                font-size:13px;
                color:#ccc;
            }

JavaScript

/**
             * Notre function jQuery
             */
            $.fn.ctrlEnter = function(btns, fn) {
                var thiz = $(this);

                btns = $(btns);
                
                
                function performAction(e) {
                    fn.call(thiz, e);
                }
                
                
                thiz.bind("keydown", function(e) {
                    /**
                     * Action Ctrl+Enter
                     */
                    if (e.keyCode === 13 && e.ctrlKey) {
                        performAction(e);
                        e.preventDefault();
                    }
                });
                
                /**
                 * Si on clic sur le bouton 
                 * On déclenche l'action
                 */
                btns.bind("click", performAction);

            };

            /**
             * Trigger 
             */
            $("#msg").ctrlEnter("button", function() {
                var dt = new Date();
                var currentTime = dt.getDay() + "-" + dt.getMonth() + "-" + dt.getFullYear() + " à " + dt.getHours() + ":" + dt.getMinutes() + ":" + dt.getSeconds();
                $("<p class=\"msg\"></p>").append('<time>' + currentTime + ' : </time> ' + this.val().replace(/\n/g, "<br />")).prependTo('.msg-loader');
                this.val("");
            });