textArea onFocus 时未触发 Button ClickEvent

Question

我需要在关注文本区域输入时触发按钮ClickEvent。 PS : 我的 textArea 带有一些样式，当它聚焦时它会最大化

示例如下： https://stackblitz.com/edit/angular-ivy-zy9sqj?file=src/app/app.component.html

Answer 1

一旦您点击 button，您的 textarea 就会失去焦点，并且 returns 回到初始状态 height，这就是错过点击的原因。您一定不能让 textarea 在失去焦点后立即返回到初始状态 height，或者延迟它，以便先点击按钮。

一种方法是使用 JavaScript mouseover 事件将文本区域高度设置为其悬停按钮时的最大高度。

然后，单击按钮后，将其更改回初始高度。

查看以下解决方法是否适合您！

HTML:

<textarea id="text">test</textarea> <br/>
<button id="button">Change</button>

CSS:

textarea{
  height: 100px; /* initial height */
}    
textarea:focus {
  height: 200px; /* maximized height */
}

JavaScript:

document.querySelector('#button')
        .addEventListener('click', function () {
            document.querySelector('#text').value += 'changed';
            document.querySelector('#text').style.height = '100px';
});

document.querySelector('#button')
        .addEventListener('mouseover', function () {
            document.querySelector('#text').style.height = '200px';
});

jsFiddle: https://jsfiddle.net/ew86fb5p/

希望对您有所帮助！

textArea onFocus 时未触发 Button ClickEvent

Button ClickEvent not triggered when textArea onFocus

onclick

buttonclick

typescript

angular