Question

这是一个相当标准的UI练习，所以我想我能够很快找到解决方案，但我没有运气。

这是我通常会为此功能编写的jQuery：

(function($){   
    $.fn.focusClear = function(text) {
        text = text || this[0].defaultValue;
    this.focus(function() {
      if($(this).val() == text) $(this).val('');
    }).blur(function() {
      if( $(this).val() == '') $(this).val(text);
    });
    return this;
  };
})(jQuery);

如何使用Angular实现相同的效果？

Answer 1

不确定我是否完全了解您的预期功能，但您可以将placeholder用于此类内容？

Answer 2

我也非常需要这个角度，然后想出了这个：

app.directive('input', function() {
    return {
      restrict: 'E',
      link: function(scope, element, attrs) {

        var defaultVal = element.val();

        element.bind("focus", function(e) {
            if(element.val() == defaultVal) element.val('');
        })

        element.bind("blur", function(e) {
            if( element.val() == '') element.val(defaultVal);
        });
      }
    }
});

Answer 3

Angularjs没有焦点事件的内置侦听器，但您可以自己编写。

但首先请注意，所有现代浏览器都支持输入字段的placeholder属性，这样做可以做你想做的事。

<input type="text" placeholder="username" name="username">

Answer 4

占位符可能是您需要的答案，但是如果您需要对元素进行更多控制，我建议您查看指令：

文档：http://docs.angularjs.org/guide/directive
Youtube：http://www.youtube.com/watch?v=WqmeI5fZcho

从本质上讲，指令使您能够赋予元素行为。而且，如果你想要进行任何类型的DOM操作，建议的方法是使用Angular的这个功能（永远不要在控制器中做DOM的东西）。使用指令中的link函数，您可以轻松获取元素及其属性并操纵元素的范围。

希望有所帮助。

如何使用AngularJS设置输入框以清除焦点上的默认值

4 个答案: