Question

当我点击输入元素时，我正在尝试显示textarea元素。目标是显示textarea，但是当我点击其他任何地方时，textarea就会消失。如果我点击textarea上的任何地方，它就会保持可见。

我在stackoverflow上看到了一个类似的例子 - ＆gt; Link to similar question

该方法是使用document.documentElement将一个addEventListener添加到html标记，所以基本上整个页面，但我想知道是否有替代方案？将addEventListener添加到整个页面是否安全？

addEventListener到整个页面的代码：

 document.documentElement.addEventListener('click',clickhandler,false);

我也不想挑剔，但我想避免在元素上使用超时

除了上面的代码，我首先尝试使用click事件，一切正常，但当我点击其他地方时，textarea不会消失。

然后我尝试了焦点/模糊事件，但是当输入失去焦点时，textarea就会消失。

我在考虑点击功能的if条件...但是我不确定如果不向整个页面添加点击事件会如何工作......

JSFiddle：http://jsfiddle.net/LghXS/

HTML \

 <input type="text" id="email">
 <textarea id="suggestion"></textarea>

CSS

 textarea{
 display:none;  
 }

JS

var textarea = document.getElementById('suggestion');

var input = document.getElementById('email');

// Using the Click Event
input.addEventListener('click',function(){
  var display = textarea.style.display;

  if(display === '' || display === 'none'){
    textarea.style.display='inline-block';
  }else{
    textarea.style.display='none';
  }
});

// Using the Focus and Blur
/*
input.addEventListener('focus',function(){

  textarea.style.display='inline-block';

  input.addEventListener('blur',function(){
  textarea.style.display='none';
  });
});
*/

Sooo，任何想法？

是否可以将addEventListener添加到整个页面

0 个答案: