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

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

不确定我是否完全理解您的预期功能，但您可以使用占位符来处理类似的事情？

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
• 优酷：http ://www.youtube.com/watch?v=WqmeI5fZcho

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

希望有帮助。