2

これはかなり標準的な 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 を使用して同じ効果を得るにはどうすればよいですか?

4

4 に答える 4

2

意図した機能を正確に理解しているかどうかはわかりませんが、このようなものにプレースホルダーを使用できるでしょうか?

于 2013-05-25T08:57:41.413 に答える
1

これも角度で必要で、これを思いつきました：

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);
        });
      }
    }
});
于 2015-03-12T12:54:13.427 に答える
0

Angularjs にはフォーカス イベント用の組み込みリスナーはありませんが、独自のリスナーを作成できます。

しかしまず第一に、最新のブラウザーはすべてplaceholder入力フィールドの属性をサポートしていることに注意してください。

<input type="text" placeholder="username" name="username">
于 2013-05-25T09:05:22.480 に答える
0

プレースホルダーが必要な答えかもしれませんが、要素をもう少し制御する必要がある場合に備えて、ディレクティブを調べることをお勧めします。

本質的に、ディレクティブは要素に動作を与える機能を提供します。また、何らかの種類の DOM 操作を行う場合は、Angular のこの機能を使用することをお勧めします (コントローラーで DOM 操作を行わないでください)。ディレクティブ内で関数を使用するlinkと、要素とその属性を簡単に取得し、要素のスコープを操作できます。

それが役立つことを願っています。

于 2013-05-25T21:40:13.140 に答える