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

How can I set an input box to clear its default value on focus using AngularJS

本文关键字：焦点 清除 默认值 设置 AngularJS 何使用 输入      更新时间：2023-09-26

这是一个相当标准的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实现同样的效果?

不确定我是否完全理解您的意图功能，但您可能能够使用占位符这样的东西?

我在angular中也需要这个，于是我想到了这个:

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);
        });
      }
    }
});

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

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

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

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

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

本质上，指令赋予你赋予元素行为的能力。而且，如果你想做任何类型的DOM操作，建议的方法是使用Angular的这个特性(永远不要在控制器中做DOM操作)。使用指令中的link函数，您可以轻松地获取元素，其属性和操作元素的作用域。

希望对你有帮助。

相关文章：