chmln / vue-wysiwyg

A lightweight WYSIWYG HTML editor for Vue.js
https://chmln.github.io/vue-wysiwyg/
MIT License
555 stars 134 forks source link

Link inputs focus #73

Open fureszk opened 5 years ago

fureszk commented 5 years ago

Cannot focus on the input fields by clicking on them, has to click on the labels next to them or use the keyboard. Google Chrome latest.

altronic commented 5 years ago

This bug makes it extremely hard for users to enter information into input fields. Is anyone working on this issue or found workaround solutions ? thanks!

fureszk commented 5 years ago

@altronic Here is the workaround I use (requires jQuery):

$( document ).ready(function() {
    $('.editr--toolbar .dashboard label').click(function (event) {$(event.target).focus()});
});
altronic commented 5 years ago

It works! Thank you so much !!

berendsmatt commented 5 years ago

table as well

btouchard commented 5 years ago

:+1:

alesandro777 commented 5 years ago
    onBtnClick ($event) {
        $event.preventDefault(); block input fields

you can in Button.vue remove onmousedown from form and change a tag to button and set there @click.prevent="onBtnClick"

abdulrahimtetrahex commented 5 years ago
const items = [].slice.call(document.querySelectorAll('.editr--toolbar .dashboard form'));
      items.forEach(function (item, idx) {
        item.addEventListener('click', function(e) {
         e.target.focus()
        }.bind(this))
      })

In plain javascript

tiofabby commented 3 years ago

You can change directly the hyperlink.vue file and build again with following changes:

<template>
    <form @submit.prevent="insertLink">
        <input
            ref="url"
            id="wysiwyg-input-text"
            type="text"
            style="width: 30%"
            v-model="url"
            placeholder="Paste URL here.."
            onclick="document.getElementById('wysiwyg-input-text').focus()"
        >
        <input
            id="wysiwyg-input-title"
            type="text"
            style="width: 30%"
            v-model="title"
            placeholder="Set Title here.."
            onclick="document.getElementById('wysiwyg-input-title').focus()"
        >
        <button
            type="submit"
            >ADD</button>
    </form>

</template>