[Angular2+/JavaScript]点击DIV变成可编辑文本，移开Input消失/原生写法/autofocus失效解决/Directive相关

point:

1、Angular2+的话可以直接在ts里面写，但是考虑到有很多个item，所以改为Directive，但是思路是一样的

2、关于Input自动focus的话是可以H5里写autofocus，但是它none->block之后再次渲染就失效了，我也是醉了，所以只能用定时器的方法在后天把它放到另一个线程了。

效果图：

未点击/或者bulr的时候

点击后：（可编辑的）

思路：其实是DIV和input在同一个位置，控制谁先消失和出现，由于需要双向绑定和监听事件会显得比较麻烦，

点击父DIV--》监听click->绑定focus，并且在父DIV的整个范围里再写一个监听，一旦input失焦，好的那么一切恢复原状

代码：

 {{testValue}}

@HostListener('click', ['$event.target'])public onClick(targetElement) {const fieldInput = this.el.nativeElement.querySelector('.field-input');const fieldbase = this.el.nativeElement.querySelector('.field-base');const input = this.el.nativeElement.querySelector('input');setTimeout(() => {input.focus();}, 10);this.renderer.setStyle(fieldInput, 'display', 'block');this.renderer.setStyle(fieldbase, 'display', 'none');input.addEventListener('blur', (event) => {this.renderer.setStyle(fieldInput, 'display', 'none');this.renderer.setStyle(fieldbase, 'display', 'block');});

其实这里已经有点违反Angular少操作DOM的原则了，监听事件也偏向原生JS，思路其实蛮简单，如果是纯JS也可以实现

click是绑定在父DIV上的，父DIV里也可以取到当前元素的子元素，原生JS和Angular取DOM的方式不同，不多说了

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！