Question

烦人的是，我已经开始工作了。我剪掉了代码以整理一下……但是忘了将粘贴的部分保存在文本编辑器中！！

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

我不能在body标签中使用listener / addEvent，因为它们也在输入textarea的详细信息。不要认为它对函数有什么好处，因为一旦修改了文本，它就会立即返回。我= THINK =我需要在函数的末尾循环，以使其不断对addEvent或类似事件进行轮询。

或其他建议？

Answer 1

我认为这就是您要的。如果用户开始键入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>

突破键盘功能

1 个答案: