Eventos editáveis por conteúdo - Jquery

Question

Aug 05, 2018, 03:02 AM

events contenteditable mouselistener javascript jquery

Eventos editáveis por conteúdo - Jquery

Adicionei suporte editável na tabela. Estou obtendo dados usando o evento keydown. Quando o usuário pressiona "Enter", a nova entrada é retirada e a área é borrada. Mas o usuário também pode clicar em qualquer lugar, exceto na área de entrada para desfocar. (Esse é um recurso editável por conteúdo). E eu não posso ouvir essa ação. Como posso criar um ouvinte de eventos como pressionamento de tecla para esta ação.

Isso funciona para "Enter", mas não clique

<html>
    <head></head>
    <body>
        <table id="table">
            <thead>
                <tr>
                    <th>col1</th>
                    <th>col2</th>
                    <th>col3</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <th>#1</th>
                    <td contenteditable="true">Editable1</td>
                    <td contenteditable="true">Editable2</td>
                </tr>
            </tbody> 
        </table>
        <script
        src="https://code.jquery.com/jquery-3.3.1.js"
        integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
        crossorigin="anonymous"></script>
    </body>
</html>

$('#table tbody tr').keydown(function (event){
    enter = event.which == 13,
    el = event.target;

    if(enter){
        el.blur();
        console.log("entered");
        console.log($(this).find(':nth-child(2)').html());
        console.log($(this).find(':nth-child(3)').html());
    }
});

leaveComments