时间戳

首页 > 解决方案 > 从键盘中断一个功能

javascript - 从键盘中断一个功能

问题描述

烦人的是，我有这个工作。我剪掉了代码来整理......但忘记在文本编辑器中保存粘贴的部分！

前提是：人们在文本区域中键入消息。然后，他们单击一个按钮，该按钮调用一个函数，并打开一个显示修改后消息的 div。但是......我现在希望他们单击​​键盘以再次隐藏，（即键盘触发另一个功能）

我不能在 body 标记中使用 listener / addEvent，因为它们也在输入 textarea 的详细信息。不要认为它在函数中会有任何好处，因为它会在修改文本后立即返回。I =THINK= 我需要在函数的最后一个循环，以便它不断重新轮询 addEvent 或类似的。

或者其他建议？

标签： javascriptkeyboard

解决方案

我想这就是你所要求的。如果用户开始输入 agin，它将隐藏预览 div。但是，最好有一个随着他们键入而发展的“活动”预览。

const previewDiv = () => document.querySelector('#preview');
const textArea = () => document.querySelector('input[type="textarea"]');
const preview = () => document.querySelector('button');

document.addEventListener('DOMContentLoaded', () => {
  textArea().addEventListener('keydown', () => previewDiv().setAttribute('class', 'hide'));
  preview().addEventListener('click', () => {
    console.log('test');
    previewDiv().setAttribute('class', 'show');
    console.log(previewDiv());    
    previewDiv().innerHTML = textArea().value;
  });
});
#preview {
  border: 1px solid black;
  padding: 10px;
}

.show {
  display: block;
}

.hide {
  display: none;
}
<input type="textarea" />
<button>Preview</button>
<div id="preview" class="hide"></div>

这是上面的活字版本，当用户输入时，我们可以预览输出。

const previewDiv = () => document.querySelector('#preview');
const textArea = () => document.querySelector('input[type="textarea"]');


document.addEventListener('DOMContentLoaded', () => {
  textArea().addEventListener('keyup', () => {
    previewDiv().innerHTML = textArea().value;
  });
});
#preview {
  border: 1px solid black;
  padding: 10px;
}
<input type="textarea" />

<div id="preview"></div>

推荐阅读