Angularjs DOM implements the Ng-keyup event

This article mainly and you introduced the ANGULARJS to the dynamic addition of DOM implementation Ng-keyup Event example, small series feel very good, now share to everyone, also to make a reference, hope to help everyone.

We often see this form of content on our web pages,

With a mouse click, it becomes a input ,

If the content is not entered, and the mouse leaves, it will be back to the original appearance, if you enter the content, even if the mouse left, but also keep the content unchanged, when entering enter, add content, and empty the input box.

I'm thinking this is how it's done? Thought for a moment there is such a thought: the normal case of this is an p p element, click to become an input element, the mouse left to change back to the original element. The code ( including the detailed annotated version ) is as follows:

Window.onload = function () {  //page is loaded to add the OnClick method  document.getElementById ("Click-to-add" for the element with ID click-to-add) ). onclick = function () {    //This is the element with ID Click-to-add in this function, save it to the variable non_input_type    var non_input_type = this;    Create a new input, save to the variable Input_type    var input_type = document.createelement ("input");    Add class and placeholder to input, and here I find that class is valid for bootstrap    input_type.setattribute ("placeholder", "Add to-dos");    Input_type.classname = "Form-control";    Gets the parent element, and then replaces the parent element with child    This.parentNode.replaceChild (Input_type, non_input_type);    Set the focus to the input box    input_type.focus ();    When input loses focus, that is, the mouse point is somewhere else    Input_type.onblur = function () {    ///And input is not entered when the    if (input_ Type.value.length = = = 0) {      //replace back to original object      Input_type.parentNode.replaceChild (Non_input_type, Input_type);      }    }  }};

The corresponding html code is simple:

  <p>    <p id= "Click-to-add" >      <span>+</span>      <span> add to Dos </span>    </p>  </p>

So input how do you respond to a carriage return? htmlbring your own onkeyup can be easily done, not shown here, you can search by yourself. In the Angular , can be input added ng-keyup to achieve, this is also very simple, but in the present problem, input is not the beginning, but the new generation, direct use ng-keyup does not work, Angular will only listen to the page after the load ngmethod, the new is not valid, to make the new DOM can also respond to the method, you Angular need to use the $compile method, the preceding this.parentNode.replaceChild(input_type, non_input_type); sentence before the code to add the following two lines:

Add Ng-keyup event, corresponding to execute send ($event) This function input_type.setattribute ("Ng-keyup", "Send ($event)");//for Input_type use $ Compile method $compile (Input_type) ($scope);

The next step is to write send the method, as follows:

$scope. Send = function (e) {  //different browser get key code is not the same, some e.keycode, some E.which  var keycode = Window.event?e.keycode: E.which;  The carriage return corresponds to the  if (keycode = = =) {    //E.targe is the corresponding DOM, where we get the value to handle the    alert ("Add ToDo:" + e.target.value) on your own request. );    E.target.value = "";  }}

The demo is as follows, in normal circumstances:

Click to change into an input box:

When there is content, the loss of focus will not change, no content when the return to normal state, press ENTER when the alert content:

Then I thought about it, just use input it, you can change placeholder the color ...