Contenteditable Events - Jquery

Question

Aug 05, 2018, 03:02 AM

events contenteditable javascript jquery mouselistener

Contenteditable Events - Jquery

Agregué utilería contenteditable en la tabla. Estoy obteniendo datos usando el evento keydown, cuando el usuario presiona "Enter" toma la nueva entrada y desenfoca el área. Pero el usuario también puede hacer clic en cualquier lugar excepto desde el área de entrada para desenfocar (esta es una función contenta). Y no puedo escuchar esta acción. ¿Cómo puedo crear un detector de eventos como keydown para esta acción?

Esto funciona para "Enter", pero no haga clic en

<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());
    }
});