diff --git a/directives/input.html b/directives/input.html
new file mode 100644
index 0000000..43fd60d
--- /dev/null
+++ b/directives/input.html
@@ -0,0 +1,8 @@
+<form class="form form-horizontal" ng-submit="sendMessage()">
+  <div class="input-group">
+    <input id="sendMessage" type="text" class="form-control monospace" autocomplete="off" ng-model="command" autofocus>
+    <span class="input-group-btn">
+      <button class="btn btn-default btn-primary">Send</button>
+    </span>
+  </div>
+</form>
diff --git a/index.html b/index.html
index a129d75..bb2d302 100644
--- a/index.html
+++ b/index.html
@@ -270,14 +270,7 @@ $ openssl req -nodes -newkey rsa:2048 -keyout relay.pem -x509 -days 365 -out rel
     </div>
     <div id="footer" ng-show="connected">
       <div class="navbar navbar-inverse navbar-fixed-bottom" ng-class="{'withnicklist': showNicklist}">
-        <form class="form form-horizontal" ng-submit="sendMessage()">
-          <div class="input-group">
-            <input id="sendMessage" type="text" class="form-control monospace" autocomplete="off" ng-model="command" autofocus>
-            <span class="input-group-btn">
-              <button class="btn btn-default btn-primary">Send</button>
-            </span>
-          </div>
-      </form>
+        <div input-bar></div>
     </div>
   </body>
 </html>
diff --git a/js/websockets.js b/js/websockets.js
index 7e1ad61..46b9e4a 100644
--- a/js/websockets.js
+++ b/js/websockets.js
@@ -765,3 +765,125 @@ weechat.config(['$routeProvider',
         });
     }
 ]);
+
+weechat.directive('inputBar', function() {
+    return {
+
+        templateUrl: 'directives/input.html',
+        controller: function($rootScope,
+                             $scope,
+                             connection,
+                             models) {
+
+            // Focuses itself when active buffer is changed
+            $rootScope.$on('activeBufferChanged', function() {
+                angular.element('#sendMessage').focus();
+            });
+
+            $rootScope.completeNick = function() {
+                // input DOM node
+                var inputNode = document.getElementById('sendMessage');
+
+                // get current input
+                var inputText = inputNode.value;
+
+                // get current caret position
+                var caretPos = inputNode.selectionStart;
+
+                // create flat array of nicks
+                var activeBuffer = models.getActiveBuffer();
+
+                // complete nick
+                var nickComp = IrcUtils.completeNick(inputText, caretPos,
+                                                     $rootScope.iterCandidate, activeBuffer.flatNicklist(), ':');
+
+                // remember iteration candidate
+                $rootScope.iterCandidate = nickComp.iterCandidate;
+
+                // update current input
+                $scope.command = nickComp.text;
+
+                // update current caret position
+                inputNode.focus();
+                inputNode.setSelectionRange(nickComp.caretPos, nickComp.caretPos);
+            }
+
+
+            // Send the message to the websocket
+            $scope.sendMessage = function() {
+                connection.sendMessage($scope.command);
+                $scope.command = "";
+            }
+
+            // Handle key presses in the input bar
+            $scope.handleKeyPress = function($event) {
+                // don't do anything if not connected
+                if (!$rootScope.connected) {
+                    return true;
+                }
+                
+                // Support different browser quirks
+                var code = $event.keyCode ? $event.keyCode : $event.charCode;
+
+                // any other key than Tab resets nick completion iteration
+                var tmpIterCandidate = $rootScope.iterCandidate;
+                $rootScope.iterCandidate = null;
+
+                // Left Alt+[0-9] -> jump to buffer
+                if ($event.altKey && !$event.ctrlKey && (code > 47 && code < 58)) {
+                    if (code == 48) {
+                        code = 58;
+                    }
+
+                    var bufferNumber = code - 48;
+                    var activeBuffer = models.getBufferByIndex(bufferNumber);
+                    if (activeBuffer) {
+                        models.setActiveBuffer(activeBuffer.id);
+                        $event.preventDefault();
+                    }
+                }
+
+                // Tab -> nick completion
+                if (code == 9 && !$event.altKey && !$event.ctrlKey) {
+                    $event.preventDefault();
+                    $rootScope.iterCandidate = tmpIterCandidate;
+                    $rootScope.completeNick();
+                    return true;
+                }
+
+                // Alt+A -> switch to buffer with activity
+                if ($event.altKey && (code == 97 || code == 65)) {
+                    $event.preventDefault();
+                    $rootScope.switchToActivityBuffer();
+                    return true;
+                }
+
+                // Alt+L -> focus on input bar
+                if ($event.altKey && (code == 76 || code == 108)) {
+                    $event.preventDefault();
+                    var inputNode = document.getElementById('sendMessage');
+                    inputNode.focus();
+                    inputNode.setSelectionRange(inputNode.value.length, inputNode.value.length);
+                    return true;
+                }
+
+                // Escape -> disconnect
+                if (code == 27) {
+                    $event.preventDefault();
+                    connection.disconnect();
+                    return true;
+                }
+
+                // Ctrl+G -> focus on buffer filter input
+                if ($event.ctrlKey && (code == 103 || code == 71)) {
+                    $event.preventDefault();
+                    document.getElementById('bufferFilter').focus();
+                    return true;
+                }
+
+            }
+
+        }
+
+    }
+});