Question

在Angular 2+应用程序中，我具有一些文本的只读textarea。用户应该可以在此文本区域内滚动内容。

<textarea rows="8" cols="20" readonly>
    Bacon ipsum dolor amet biltong bacon tri-tip, corned beef flank pork chop boudin capicola short ribs spare ribs landjaeger ground round rump kevin. 
</textarea>

此外，由于模糊会触发某些我不希望发生的事件，因此我需要阻止用户将其聚焦在此文本区域上。我可以使用禁用的属性来防止这种情况。

<textarea readonly disabled>

这很好用-用户可以在文本区域内滚动内容，而不能在其中聚焦。不幸的是，IE中的禁用元素中的滚动条看起来与只读输入中的滚动条不同。

我的问题是-如何防止用户在文本区域内单击，但允许滚动鼠标事件，而无需使用禁用功能。或者，我可以像禁用只读样式一样为禁用的滚动条设置样式吗？

也许我可以使用js禁用点击事件，但这似乎不起作用。（在纯es6中为示例，但这在Angular中也不起作用）。

const textarea = document.querySelector('textarea');
textarea.addEventListener('click', (e) => {
  e.preventDefault(); // does not work
  e.stopPropagation(); // also
});

这里是JS Bin的链接 https://jsbin.com/mopinepayu/edit?html,js,output

JS，Angular 2+-禁用在textarea中单击，阻止焦点

0 个答案: