AngularJS は動的に増加する DOM 用の ng-keyup イベントの例を実装します

この記事では主に、動的に追加された DOM に対して ng-keyup イベントを実装する AngularJS の例を紹介します。

図に示すように、Web ページでこの形式のコンテンツがよく見られます:

マウスでクリックすると、図に示すように input になります: input，如图：

如果未输入内容，并且鼠标离开后，则变回了原来的样子；如果输入了内容，即使鼠标离开，也保持内容不变，此时输入回车，则添加内容，并清空输入框。

我在想这个是这么实现的？想了一下有这么一个思路：普通情况下这个是一个p或p元素，点击之后变成一个input元素，鼠标离开则变回原元素。代码（含详细注释版）如下：

window.onload = function () {
  // 页面加载完给id为click-to-add的元素增加onclick方法
  document.getElementById("click-to-add").onclick = function () {
    // this在这个函数中就是id为click-to-add的元素，将其保存到变量non_input_type
    var non_input_type = this;
    // 新建一个input，保存到变量input_type
    var input_type = document.createElement("input");
    // 给input添加class和placeholder，这里我发现class对bootstrap有效
    input_type.setAttribute("placeholder", "添加待办事项");
    input_type.className = "form-control";
    // 获取父元素，然后父元素替换Child
    this.parentNode.replaceChild(input_type, non_input_type);
    // 设置焦点到input框中
    input_type.focus();
    // 当input失去焦点，即鼠标点到了别的地方
    input_type.onblur = function () {
    // 且input中没有输入内容时
    if (input_type.value.length === 0){
      // 再替换回原来的对象
      input_type.parentNode.replaceChild(non_input_type, input_type);
      }
    }
  }
};

对应的html代码则很简单：

  <p>
    <p id="click-to-add">
      <span>+</span>
      <span>添加待办事项</span>
    </p>
  </p>

那么input怎么响应回车呢？html自带的onkeyup可以很容易做到，在此不演示，可以自行搜索。而在Angular中，可以给input增加ng-keyup来实现，这个本来也很简单，但在现在的这个问题中，input不是一开始就有的，而是新生成的，直接使用ng-keyup并不起作用，Angular只会监听在页面加载完时的ng方法，新增的则无效，要使新增的DOM也能响应Angular方法，需要对其使用$compile方法，在前文this.parentNode.replaceChild(input_type, non_input_type);这句代码之前增加以下两行：

// 增加ng-keyup事件，对应执行send($event)这个函数
input_type.setAttribute("ng-keyup", "send($event)");
// 对input_type使用$compile方法
$compile(input_type)($scope);

接下来还要编写send方法，如下：

$scope.send = function (e) {
  // 不同浏览器获取按键代码不一样，有的是e.keyCode，有的是e.which
  var keycode = window.event?e.keyCode:e.which;
  // 回车对应13
  if (keycode === 13){
    // e.targe就是对应的DOM，这里获取到value就按自己的需求去处理了
    alert("Add ToDo: " + e.target.value);
    e.target.value = "";
  }
}

演示如下，普通情况下是这样的：

点击后变成输入框：

有内容时，失去焦点也不会变，无内容时则回到普通状态，按下回车时，则alert内容：

后来我又想了一下，只使用input就可以了，可以修改placeholder

コンテンツが入力されずにマウスが離れると、元の外観に戻ります。内容を入力すると、マウスを離しても内容は変更されません。この時点で Enter を押すと、内容が追加され、入力ボックスがクリアされます。

これはどのようにして実現されるのでしょうか?しばらく考えた後、このアイデアを思いつきました。通常の状況では、これは p または p 要素で、クリックすると になります。 input 要素に移動すると、マウスが離れると、元の要素に戻ります。コード (詳細な注釈付き) は次のとおりです:

rrreee
対応する html コードは非常に単純です:

rrreee
では、input はキャリッジ リターンにどのように応答するのでしょうか? html に付属する onkeyup は、ここでは説明しませんが、自分で検索することができます。 Angular では、ng-keyup を input に追加してこれを実現できます。これは本来非常に単純ですが、現在の問題では です。 >input は最初から存在しませんが、ng-keyup を直接使用して新しく生成されたものは ng のみをリッスンします。ページがロードされるときの メソッドは無効です。新しく追加された DOM が Angular メソッドにも応答するようにするには、 $ を使用する必要があります。 COMPILE メソッドを実行し、前のコード this.parentNode.replaceChild(input_type, non_input_type); の前に次の 2 行を追加します。次のステップは、次のように send メソッドを作成することです:

rrreee
デモは次のとおりです。通常の状況では次のようになります:

クリックすると入力ボックスになります:

🎜コンテンツがある場合は、コンテンツがありません。通常の状態に戻って Enter キーを押し、alert コンテンツを表示します: 🎜🎜🎜🎜そこでもう一度考えたのですが、input を使用するだけで、placeholder の色を変更できます。 ..🎜🎜 🎜以上は皆さんのためにまとめたもので、今後皆さんのお役に立てれば幸いです。 🎜🎜関連記事: 🎜🎜🎜Vueシングルページアプリケーションが個別のスタイルファイルを参照する2つの方法🎜🎜🎜🎜🎜angular4 複数コンポーネントでの共有サービスデータ通信の例🎜🎜🎜🎜🎜jsのストレージキー値に基づく権利と注意事項をご紹介🎜🎜🎜🎜🎜🎜🎜🎜🎜

以上がAngularJS は動的に増加する DOM 用の ng-keyup イベントの例を実装しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。