我们经常在网页中看到这种形式的内容，如图所示：

用鼠标点击，就变成了输入，如图：

如果没有输入内容，鼠标离开，会变回原来的样子；如果输入内容，即使鼠标离开，内容也将保持不变。如果此时输入回车，内容将被添加，输入框将被清空。

我想知道这是如何实现的？想了想，有个想法：正常情况下，这是一个div或者p元素，点击后变成输入元素，鼠标离开后变回原来的元素。代码(包括详细注释版本)如下：

window . onload=function(){//add onclick方法document . getelementbyid(' click-to-add ')。onclick=function () {//在这个函数中，这是id为click-to-add的元素，保存到变量non _ input _ type var non _ input _ type=this；//创建一个新的输入并保存到变量input _ type var input _ type=document . create element(' input ')；//给输入添加类和占位符，这里我发现类对bootstrap input _ type . setattribute有效('占位符'，'添加待办事项')；input _ type . class name=' form-control '；//获取父元素，然后父元素替换child this . parent node . replace child(input _ type，non _ input _ type)；//在输入框中将焦点设置为input _ type . focus()；//如果(input _ type . value . length==0){//当输入失去焦点，也就是鼠标在别的地方点击，input _ type.onblur=function()，并且输入中没有输入，那么就替换原来的对象input _ type . parent node . replace child(non _ input _ type，input _ } } } } }；相应的html代码很简单：

Div p id='点击添加' span/span span添加待办事项列表/span /p /div输入如何响应回车？带有html的Onkeyup很容易实现。这里不演示，但是你可以自己搜索。在Angular中，可以通过在输入中加入ng-keyup来实现，也很简单。然而，在当前的问题中，输入在开始时不可用，而是新生成的。直接用ng-keyup是不行的。Angular只会在加载页面时监听ng方法，但新添加的方法将无效。为了使新添加的DOM响应Angular方法，有必要使用$compile方法。在前一篇文章中，这。parent node . replace child(input _ type，non _ input _ type)；在此代码前添加以下两行：

//添加ng-keyup事件，对应执行send($event)函数input _ type . setattribute(' ng-key up '，' send($ event '))；//对input_type使用$compile方法$ compile(input _ type)($ scope)；然后编写发送方法，如下所示：

$scope.send=function (e) {//不同的浏览器得到不同的键码，有的是e.keyCode，有的是e .哪个var keycode=window.event？e . key code : e . what；//回车对应13 if (keycode==13) {//e. targe是对应的DOM，而alert ('addtodo:' e. target。value)是在这里获取值时根据自身的要求进行处理的；e . target . value=' '；}}演示如下，通常是这样的：

点击后，它变成一个输入框：

如果有内容，焦点不会改变，如果没有内容，会回到正常状态，如果按回车键，提醒内容为：

后来我又想了想，就用输入，可以改变占位符的颜色…

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。