CODEWITHSUNDEEP
javascriptvue.js
Snookums
Snookums

Reputation: 1340

How to prevent clicking a button from making other elements become blur?

Let's say there is a textarea and a button.
After clicking the button, the textarea will become blur, but I don't want this.
I want clicking the button to NOT make the textarea blur.
Could anyone teach me how to do this? <> Thanks!

Upvotes: 2

Views: 1298

Answers (3)

jinseok.oh
jinseok.oh

Reputation: 233

Did you make sure set attribute of button Type to "button"

Upvotes: 0

Lea Eichelsd&#246;rfer
Lea Eichelsd&#246;rfer

Reputation: 96

Just cancel the mousedown event on the button

<div v-on:mousedown="handler">Button</div>

handler:

methods: {handler(event) {event.preventDefault(); event.stopPropagation()}}

As the button will not gain focus on click, the textarea will not be blurred. Another sideeffect of cancelling mousedown is that the click event is still available.

Upvotes: 0

Hamza Arshad
Hamza Arshad

Reputation: 846

You can override the button click and focus on the textarea:

<textarea id="text-area" />
<button onClick="buttonClicked()" > Click Me </button>

<script>

    function buttonClicked() {
       document.getElementById("text-area").focus();
    }

</script>

Upvotes: 1

Related Questions