Add shortcut: press backspace to focus the search box and rewrite keywords, and focus the search box when the page is ready

PeachScript · PeachScript · commit f7bbfc469539 · 2014-12-04T16:51:28.000+08:00
diff --git a/app/index.html b/app/index.html
@@ -9,10 +9,10 @@
         <script src="bower_components/angular-zeroclipboard/src/angular-zeroclipboard.js"></script>
         <script src="scripts/app.js"></script>
     </head>
-    <body ng-app="abstackVarLib" ng-controller="mainCtrl">
+    <body ng-app="abstackVarLib" ng-controller="mainCtrl" backspace-focus="search">
         <header>
             Abstack Tech Variables Library
-            <input type="text" class="search-box" placeholder="Type some keywords..." ng-model="keywords">
+            <input type="text" id="search" class="search-box" placeholder="Type some keywords..." ng-model="keywords" ready-focus>
         </header>
         <ul class="word-list ng-hide" ng-show="wordsList">
             <li ng-repeat="word in wordsList | keywords: keywords">
@@ -21,7 +21,7 @@ <h3>
                     <a target="_blank" ng-href="{{ word.url?word.url: 'http://www.dict.cn/' + word.word }}" ng-bind="word.word"></a>
                 </h3>
                 <span class="tag-box">
-                    <em ng-repeat="tag in word.tags track by $index" ng-bind="tag" ng-click="setKeywords(tag)"></em>
+                    <a href="javascript:;" ng-repeat="tag in word.tags track by $index" ng-bind="tag" ng-click="setKeywords(tag)"></a>
                 </span>
             </li>
         </ul>
diff --git a/app/scripts/app.js b/app/scripts/app.js
@@ -10,6 +10,32 @@ angular.module('abstackVarLib', ['zeroclipboard'])
           swfPath: '../bower_components/zeroclipboard/dist/ZeroClipboard.swf'
         });
     }])
+    .directive('readyFocus', ['$document', function($document){
+        return {
+            restrict: 'A',
+            link: function($scope, iElm, iAttrs, controller) {
+                $document.ready(function(){
+                   iElm[0].focus(); 
+                });
+            }
+        };
+    }])
+    .directive('backspaceFocus', function(){
+        return {
+            restrict: 'A',
+            link: function($scope, iElm, iAttrs, controller) {
+                var targetObj = document.getElementById(iAttrs['backspaceFocus']);
+
+                iElm[0].onkeydown = function(ev){
+                    var event = ev || event,
+                        keyCode = event.keyCode;
+                    if(keyCode == 8 && targetObj){
+                        targetObj.focus();
+                    }
+                };
+            }
+        };
+    })
     .filter('keywords', function(){
         return function(input, type){
             if(!type)
diff --git a/app/styles/main.less b/app/styles/main.less
@@ -128,7 +128,7 @@ only screen and (min-device-pixel-ratio: 2){
                 font-size: 14px;
                 margin-right: -2px;
             }
-            em{
+            a{
                 @bgcolor: #eee;
                 position: relative;
                 display: inline-block;
@@ -137,6 +137,7 @@ only screen and (min-device-pixel-ratio: 2){
                 padding: 3px 6px;
                 font-size: 13px;
                 font-style: normal;
+                text-decoration: none;
                 color: #333;
                 background-color: @bgcolor;
                 border-top-right-radius: 3px;
