在輸入焦點上選擇文本

Question

我有一個文本輸入。當輸入獲得焦點時，我想選擇輸入內的文本。

使用jQuery我會做這種方式：

<input type="text" value="test" /> 

$("input[type=text]").click(function() { 
    $(this).select(); 
    // would select "test" in this example 
}); 

我周圍中搜索，試圖找到該角的方式，但大多數的例子我發現正在處理一個指令那是在觀察改變的模態屬性。我假設我需要一個指令來監視接收焦點的輸入。我會怎麼做？

Answer 1

在Angular中這樣做的方法是創建一個自定義指令，爲您自動選擇。

module.directive('selectOnClick', ['$window', function ($window) { 
    return { 
     restrict: 'A', 
     link: function (scope, element, attrs) { 
      element.on('click', function() { 
       if (!$window.getSelection().toString()) { 
        // Required for mobile Safari 
        this.setSelectionRange(0, this.value.length) 
       } 
      }); 
     } 
    }; 
}]); 

應用指令是這樣的：

<input type="text" value="test" select-on-click /> 

View demo

UPDATE1：刪除jQuery的依賴。

Update2：限制爲屬性。

Update3：適用於移動Safari。允許選擇部分文本（需要IE> 8）。

Answer 2

這是一個古老的答案，對角的1.x

更好的方式來做到這一點是通過使用ng-click內置指令：

<input type="text" ng-model="content" ng-click="$event.target.select()" /> 

編輯：

由於JoshMB已經提醒;在Angular 1.2+中引用DOM節點不再被允許。在您的控制器

<input type="text" ng-model="content" ng-click="onTextClick($event)" /> 

然後：：所以，我搬到$event.target.select()到控制器

$scope.onTextClick = function ($event) { 
    $event.target.select(); 
}; 

這裏是一個example fiddle。

Answer 3

這是一個增強的指令，它避免在用戶單擊以將光標置於輸入框中時重新選擇文本。

module.directive('selectOnClick', function() { 
    return { 
     restrict: 'A', 
     link: function (scope, element) { 
      var focusedElement; 
      element.on('click', function() { 
       if (focusedElement != this) { 
        this.select(); 
        focusedElement = this; 
       } 
      }); 
      element.on('blur', function() { 
       focusedElement = null; 
      }); 
     } 
    }; 
}) 

Answer 4

接受的答案是使用單擊事件但是如果你使用的焦點事件，只有第1點擊就會觸發該事件，同時也時觸發一些其他的方法來集中輸入（如打標籤或在代碼中調用焦點）。

這也使得沒有必要檢查元素是否已經被Tamlyn的回答所暗示。

app.directive('selectOnClick', function() { 
    return { 
     restrict: 'A', 
     link: function (scope, element, attrs) { 
      element.on('focus', function() { 
       this.select(); 
      }); 
     } 
    }; 
}); 

Answer 5

這兩種建議的解決方案都不適合我。快速研究後，我想出了這個：

module.directive('selectOnFocus', function ($timeout) { 
    return { 
     restrict: 'A', 
     link: function (scope, element, attrs) { 
      var focusedElement = null; 

      element.on('focus', function() { 
       var self = this; 
       if (focusedElement != self) { 
        focusedElement = self; 
        $timeout(function() { 
         self.select(); 
        }, 10); 
       } 
      }); 

      element.on('blur', function() { 
       focusedElement = null; 
      }); 
    } 

    } 

}); 

它提出了幾種解決方案的組合，但工程上都點擊對焦（自動對焦認​​爲），並允許在輸入部分值的手動選擇。

Answer 6

修改後的版本，爲我工作。 首先點擊選擇文本，相同的元素第二次單擊取消選擇文本

module.directive('selectOnClick', function ($timeout) { 
return { 
    restrict: 'A', 
    link: function (scope, element, attrs) { 
     var prevClickElem = null; //Last clicked element 
     var ignorePrevNullOnBlur = false; //Ignoring the prevClickElem = null in Blur massege function 

     element.on('click', function() { 
      var self = this; 
      if (prevClickElem != self) { //First click on new element 
       prevClickElem = self; 
       $timeout(function() { //Timer 
        if(self.type == "number") 
         self.select(); 
        else 
         self.setSelectionRange(0, self.value.length) 
       }, 10); 
      } 
      else { //Second click on same element 
       if (self.type == "number") { 
        ignorePrevNullOnBlur = true; 
        self.blur(); 
       } 
       else 
        self.setSelectionRange(self.value.length, self.value.length); //deselect and set cursor on last pos 
      } 
     }); 

     element.on('blur', function() { 
      if (ignorePrevNullOnBlur == true) 
       ignorePrevNullOnBlur = false; //blur called from code handeling the second click 
      else 
       prevClickElem = null; //We are leaving input box 
     }); 
    } 
} 

}）

Answer 7

對於我來說，NG-點擊沒有意義，因爲你永遠無法重新定位光標，而無需再次選擇所有文字，我發現這是令人興奮的。那麼最好使用ng-focus，因爲只有當輸入沒有被聚焦時才選擇文本，如果再次點擊來重新定位光標，那麼文本就像預期的那樣取消選擇，並且可以在兩者之間寫入。

我發現這種方法是預期的UX行爲。

使用ng-focus

選項1：單獨的代碼

<input type="text" ng-model="content" ng-focus="onTextFocus($event)" /> 

和在控制器

$scope.onTextFocus = function ($event) { 
    $event.target.select(); 
}; 

選項2：作爲替代可以加入上面的代碼到該「單線」（我沒有測試這個，但它應該工作）

<input type="text" ng-model="content" ng-focus="$event.target.select()" /> 

Answer 8

在角2，這個工作對我來說，無論是在瀏覽器火狐&：

<input type="text" (mouseup)="$event.target.select()">