1

Estoy tratando de evitar que en los parrafos editables (class=".parrafo_editable") se pegue contenido que supere los 30 caracteres. Pero el unico problema que tengo es que el e.preventDefault no funciona al momento de pasar por un if. Hice pruebas pensando que era otro error pero si ponen un console.log SI SE LLEGA A EJECUTAR. Entonces, SOLO eso seria mi inconveniente. Gracias al que se tome el tiempo de ayudarme :) .

POSDATA: El código que dejare después de la descripción se encuentra al final de la secciona javascript.

//TODO: NO FUNCIONA EL preventDefault()
$(document).on("paste", ".parrafo_editable", function(e){
  var texto = $(this).text() + event.clipboardData.getData('text/PLAIN');

   if(texto.length > 30){
     e.preventDefault(); //AQUÍ ESTA EL e.preventDefault(); QUE NO FUNCIONA.
   }
 });

$(document).ready(function() {
    $(".contenedor-panel").on("click", ".panel-ficha", function() {
      var t = $(this); 
      var tp = t.next(); 
      var p = t
        .parent()
        .siblings()
        .find(".panel-aspecto");
      tp.slideToggle();
      p.slideUp();
    });
  
    $(".contenedor-panel").on("click", ".panel-aspecto-descripcion", function() {
      var t = $(this);
      var tp = t.next();
      var p = t
        .parent()
        .siblings()
        .find(".panel-aspecto-descripcion-indicadores");
      tp.slideToggle();
      p.slideUp();
    });
  
    $(".editar").on("click", function(e) {
      e.stopPropagation();
    });
  
    let panelAspectoDescripcionIndicadores =
      '<div class="contenedorTotalPreguntas">' +
      '<div class="puntaje">' +
      '<div class="puntaje-hijo puntaje-descripcion">PUNTAJE</div>' +
      '<div class="puntaje-hijo puntaje-puntuacion">1</div>' +
      '<div class="puntaje-hijo puntaje-puntuacion">2</div>' +
      '<div class="puntaje-hijo puntaje-puntuacion">3</div>' +
      '<div class="puntaje-hijo puntaje-puntuacion">4</div>' +
      "</div>" +
      '<div class="observacion">' +
      '<div class="observacion-hijo observacion-descripcionInicial">OBSERVACIONES</div>' +
      '<div class="observacion-hijo observacion-puntuacion">IMPORTANCIA</div>' +
      '<div class="observacion-hijo observacion-puntuacion observacion-malo">MALO</div>' +
      '<div class="observacion-hijo observacion-puntuacion observacion-regular">REGULAR</div>' +
      '<div class="observacion-hijo observacion-puntuacion observacion-bueno">BUENO</div>' +
      '<div class="observacion-hijo observacion-puntuacion observacion-muyBueno">MUY BUENO</div>' +
      '<div class="observacion-hijo observacion-descripcionFinal">OBSERVACIONES</div>' +
      '<div class="observacion-hijo observacion-i">i</div>' +
      '<div class="observacion-hijo observacion-acciones">ACCIONES</div>' +
      "</div>" +
      '<div class="pregunta">' +
      '<form class="pregunta-contenedor">' +
      '<div class="pregunta-hijo pregunta-preguntaInicial" contentEditable="true">AQUI PUEDE COLOCAR SU PREGUNTA</div>' +
      '<div class="pregunta-hijo pregunta-comboBox">' +
      '<select class="comboBox" disabled>' +
      '<option value="Vacio" selected>--Seleccione--</option>' +
      '<option value="Alta">Alta</option>' +
      '<option value="Media">Media</option>' +
      '<option value="Baja">Baja</option>' +
      "</select>" +
      "</div>" +
      '<div class="pregunta-hijo pregunta-radioButton"><input class="radioButton" type="radio" name="rButton" disabled></div>' +
      '<div class="pregunta-hijo pregunta-radioButton"><input class="radioButton" type="radio" name="rButton" disabled></div>' +
      '<div class="pregunta-hijo pregunta-radioButton"><input class="radioButton" type="radio" name="rButton" disabled></div>' +
      '<div class="pregunta-hijo pregunta-radioButton"><input class="radioButton" type="radio" name="rButton" disabled></div>' +
      '<div class="pregunta-hijo pregunta-text"><input class="text" type="text" disabled></div>' +
      '<div class="pregunta-hijo pregunta-subirArchivo"><input class="subirArchivo" type="submit" value="i" disabled></div>' +
      '<div class="pregunta-hijo pregunta-iconos">' +
      '<img src="https://img.icons8.com/material-sharp/20/000000/pencil.png" class="editarPregunta" alt="Editar" title="Editar">' +
      '<img src="https://img.icons8.com/ios/20/000000/waste-filled.png" class="eliminarPregunta" alt="Eliminar" title="Eliminar">' +
      "</div>" +
      "</form>" +
      "</div>" +
      '<input class="btn-pregunta" type="submit" value="AGREGAR UNA PREGUNTA">' +
      "</div>";
  
    $(".btn-crearElemento").on("click", function() {
      $(".panel-aspecto-descripcion-indicadores").html(
        panelAspectoDescripcionIndicadores
      );
    });
  
    $(document).on("click", ".btn-categoria", function() {
      let actual = $(this);
      let btn_categoria_actual = actual.prev();
      $(btn_categoria_actual).html(panelAspectoDescripcionIndicadores);
    });
  
    $(document).on("click", ".btn-pregunta", function() {
      let actual = $(this);
      actual
        .prev()
        .append(
          '<form class="pregunta-contenedor">' +
            '<div class="pregunta-hijo pregunta-preguntaInicial" contentEditable="true">AQUI PUEDE COLOCAR SU PREGUNTA</div>' +
            '<div class="pregunta-hijo pregunta-comboBox">' +
            '<select class="comboBox" disabled>' +
            '<option value="Vacio" selected>--Seleccione--</option>' +
            '<option value="Alta">Alta</option>' +
            '<option value="Media">Media</option>' +
            '<option value="Baja">Baja</option>' +
            "</select>" +
            "</div>" +
            '<div class="pregunta-hijo pregunta-radioButton"><input class="radioButton" type="radio" name="rButton" disabled></div>' +
            '<div class="pregunta-hijo pregunta-radioButton"><input class="radioButton" type="radio" name="rButton" disabled></div>' +
            '<div class="pregunta-hijo pregunta-radioButton"><input class="radioButton" type="radio" name="rButton" disabled></div>' +
            '<div class="pregunta-hijo pregunta-radioButton"><input class="radioButton" type="radio" name="rButton" disabled></div>' +
            '<div class="pregunta-hijo pregunta-text"><input class="text" type="text" disabled></div>' +
            '<div class="pregunta-hijo pregunta-subirArchivo"><input class="subirArchivo" type="submit" value="i" disabled></div>' +
            '<div class="pregunta-hijo pregunta-iconos">' +
            '<img src="https://img.icons8.com/material-sharp/20/000000/pencil.png" class="editarPregunta" alt="Editar" title="Editar">' +
            '<img src="https://img.icons8.com/ios/20/000000/waste-filled.png" class="eliminarPregunta" alt="Eliminar" title="Eliminar">' +
            "</div>" +
            "</form>"
        );
    });
  
    $(document).on("click", ".editarPregunta", function() {
      $(this)
        .parents(".pregunta-contenedor")
        .children(".pregunta-preguntaInicial")
        .attr("contentEditable", "true")
        .focus();
    });
  
    $(document).on("click", ".eliminarPregunta", function() {
      let actual = $(this)
        .parent()
        .parent();
      actual.remove();
    });
  
    $(document).on("paste", ".pregunta-preguntaInicial", function(e) {
      e.preventDefault();
      let datos = event.clipboardData.getData("text/PLAIN");
      document.execCommand("insertText", true, datos);
    });
  
    $(document).on("paste", ".panel-ficha", function(e) {
      e.preventDefault();
      let datos = event.clipboardData.getData("text/PLAIN");
      document.execCommand("insertText", true, datos);
    });

    $(document).on("paste", ".panel-aspecto-descripcion", function(e) {
      e.preventDefault();
      let datos = event.clipboardData.getData("text/PLAIN");
      document.execCommand("insertText", true, datos);
    });

    //TODO: NO FUNCIONA EL preventDefault()
    $(document).on("paste", ".parrafo_editable", function(e){
      var texto = $(this).text() + event.clipboardData.getData('text/PLAIN');
      
       if(texto.length > 30){
         e.preventDefault();
       }
     });
  });
* {
        box-sizing: border-box;
    }

    .panel-aspecto-descripcion {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        padding: 10px 15px;
    }

    .panel-ficha {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        padding: 10px 15px;
    }

    .parrafo_editable {
        margin: 0;
    }

    .btn-crearElemento {
        margin-bottom: 10px;
        /* margin-top: 10px; */
    }

    .btn-categoria {
        margin-bottom: 10px;
    }

    .btn-guardar {
        padding: 5px 10px;
        font-size: 12px;
        line-height: 1.5;
        background-color: #00a65a;
        box-shadow: none;
        border: 1px solid #008d4c;
        border-radius: 3px;
        color: #fff;
    }

    .comboBox:hover{
        cursor: not-allowed;
    }

    .text:hover{
        cursor: not-allowed;
    }

    .subirArchivo:hover{
        cursor: not-allowed;
    }

/*========================================================*/

.contenedor-panel{
    /* display: flex;
    flex-direction: column; */
    width: 100%;
    font-weight: 700;
    font-size: 16px;
}

.panel-ficha{
    background: #f5f5f5;
    border: 1px solid #ddd;
    padding: 10px 15px;
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
    box-shadow: 0 2px 1px rgba(0,0,0,.05);
    cursor: pointer;
    margin-bottom: 20px;
    
}

.panel-aspecto{
    display: none;
}

.panel-aspecto-descripcion-indicadores{
    display: none;
}

/*------------------------------------*/

.panel-aspecto-descripcion{
    width: 100%;
    font-weight: 700;
    font-size: 16px;
    background: #D7CCC8;
    border: 1px solid #A1887F;
    padding: 10px 15px;
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
    box-shadow: 0 2px 10px #BCAAA4;
    cursor: pointer;
    margin-bottom: 10px;
}

/*---------------------------------------*/

.panel-aspecto-descripcion-indicadores-descripcion{
    width: 100%;
    font-weight: 700;
    font-size: 16px;
    background: #FFFDE7;
    border: 1px solid #FFF9C4;
    padding: 10px 15px;
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
    box-shadow: 0 2px 10px #BCAAA4;
    cursor: pointer;
    margin-bottom: 10px;
}

/*---------------------------------------*/

.estilos-ficha-supervision{
    font-size: 14px;
    line-height: 1.42857143;
}

/*=================================================================================*/

* {
    box-sizing: border-box;
  }
  
  body {
    margin: 0;
    padding: 0;
  }
  
  /*CONTENEDOR*/
  .contenedorTotalPreguntas {
    width: 100%;
    margin: 0 auto;
    font-family: "Source Sans Pro", sans-serif;
    font-weight: 500;
  }
  
  /*PUNTAJE*/
  .puntaje {
    font-family: "Source Sans Pro", sans-serif;
    font-size: 14px;
    color: white;
    height: 30px;
    background: #3c8dbc;
    display: flex;
    flex-direction: row;
    align-items: center;
    width: 100%;
  }
  
  .puntaje-hijo {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 30px;
  }
  
  .puntaje-descripcion {
    width: 41%;
  }
  
  .puntaje-puntuacion {
    width: 8%;
  }
  
  /*OBSERVACIONES*/
  .observacion {
    font-family: "Source Sans Pro", sans-serif;
    font-size: 14px;
    color: #333;
    height: 30px;
    background: #ecf0f5;
    display: flex;
    flex-direction: row;
    align-items: center;
    width: 100%;
    margin-top: 5px;
  }
  
  .observacion-hijo {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 30px;
  }
  
  .observacion-descripcionInicial {
    width: 33%;
  }
  
  .observacion-puntuacion {
    width: 8%;
  }
  
  .observacion-descripcionFinal {
    width: 16%;
  }
  
  .observacion-i {
    width: 4%;
  }
  
  .observacion-malo {
    background-color: #fb86af;
  }
  
  .observacion-regular {
    background: #fbd386;
  }
  
  .observacion-bueno {
    background: #cdf69d;
  }
  
  .observacion-muyBueno {
    background: #cdf69d;
  }
  
  .observacion-acciones {
    /* width: 4%; */
    flex-grow: 1;
  }
  
  /*PREGUNTA*/
  .pregunta {
    /* font-family: "Source Sans Pro", sans-serif;
        font-size: 14px;
        color: #333;
        height: 55px;
        display: flex;
        flex-direction: row;
        align-items: center; */
    width: 100%;
  }
  
  .pregunta-contenedor {
    font-family: "Source Sans Pro", sans-serif;
    font-size: 14px;
    color: #333;
    /* height: 49px; */
    height: auto;
    display: flex;
    flex-direction: row;
    align-items: center;
    width: 100%;
  }
  
  .pregunta-hijo {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 49px;
  }
  
  .pregunta-preguntaInicial {
    /* display: flex; */
    display: block;
    width: 33%;
    height: auto;
    /* justify-content: flex-start; */
    padding: 15px 15px;
    text-align: justify;
}
  
  .pregunta-comboBox {
    width: 8%;
  }
  
  /**/
  select {
    cursor: pointer;
  }
  
  option {
    cursor: pointer;
  }
  /**/
  
  .pregunta-radioButton {
    width: 8%;
  }
  
  /**/
  input[type="radio"] {
    cursor: pointer;
  }
  /**/
  
  .pregunta-text {
    width: 16%;
  }
  
  /*text esta dentro de .pregunta-text*/
  
  .text {
    padding: 6px 12px;
    height: 35px;
    width: 230px;
    border: 1px solid #d2d6de;
  }
  
  /*text esta dentro de .pregunta-text*/
  
  .pregunta-subirArchivo {
    width: 4%;
  }
  
  .pregunta-iconos {
    /* width: 4%; */
    flex-grow: 1;
    justify-content: center;
  }
  
  /**/
  .pregunta-iconos img {
    cursor: pointer;
    padding: 0 5px;
  }
  /**/
  
  /*btn-pregungta esta afuera del contenedor "pregunta"*/
  
  .btn-pregunta {
    margin-bottom: 10px;
  }
  
  /*btn-pregungta esta afuera del contenedor "pregunta"*/
<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>Administración | Fichas de Evaluación</title>
    <meta content='width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no' name='viewport'>

</head>



<body class="skin-blue">

                            <div class="box-body">
                                <input type="submit" class="btn-crearElemento" value="Crear menú desplegable">
                                <div class="contenedor-panel"></div>
                                <!--<input class="btn-guardar" type="submit" value="GUARDAR CAMBIOS">-->
                            </div>
                        

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

    <script>
        //ELEMENTOS PRINCIPALES
        let btn_crearElemento = document.querySelector(".btn-crearElemento")
        const contenedor_panel = document.querySelector(".contenedor-panel")

        btn_crearElemento.addEventListener("click", function() {

            //CREACION DE VARIABLES CON SUS ATRIBUTOS EN DONDE SE ALOJARAN LOS DIV CREADOS
            const panel_ficha = document.createElement("div")//TODO: CAMBIO POR AQUI : onpaste="evitarPegarContenido();"
            panel_ficha.innerHTML = '<p class="parrafo_editable" contentEditable="true" onkeypress="return limitar(event, this.textContent, 30)">panel_ficha</p> <div class="contenedor_icon"><img class="cambiar_nombre" onclick="cambiar_nombre(this);" src="https://img.icons8.com/material-sharp/20/000000/pencil.png"> <img onclick="eliminar_elemento(this);" class="img-panel-aspecto-descripcion" title="eliminar" src="https://img.icons8.com/ios/20/000000/waste-filled.png"></div>'
            panel_ficha.contentEditable = false
            panel_ficha.classList.add("panel-ficha")

            const panel_aspecto = document.createElement("div")
            panel_aspecto.innerHTML = "panel_aspecto"
            panel_aspecto.classList.add("panel-aspecto")

            const panel_aspecto_descripcion = document.createElement("div")
            panel_aspecto_descripcion.innerHTML = '<p class="parrafo_editable" contentEditable="true" onkeypress="return limitar(event, this.textContent, 30)">panel_aspecto_descripcion</p> <div class="contenedor_icon"><img class="cambiar_nombre" onclick="cambiar_nombre(this);" src="https://img.icons8.com/material-sharp/20/000000/pencil.png"> <img onclick="eliminar_elemento(this);" class="img-panel-aspecto-descripcion" title="eliminar" src="https://img.icons8.com/ios/20/000000/waste-filled.png"></div>'
            panel_aspecto_descripcion.contentEditable = false
            panel_aspecto_descripcion.classList.add("panel-aspecto-descripcion")

            const panel_aspecto_descripcion_indicadores = document.createElement("div")
            panel_aspecto_descripcion_indicadores.textContent = "panel_aspecto_descripcion_indicadores"
            panel_aspecto_descripcion_indicadores.classList.add("panel-aspecto-descripcion-indicadores")

            //-------------------------------

            const boton_aspecto = document.createElement("input")
            boton_aspecto.setAttribute("class", "btn-categoria")
            boton_aspecto.setAttribute("type", "submit")
            boton_aspecto.setAttribute("value", "AGREGAR UNA CATEGORIA")

            //-------------------------------

            contenedor_panel.appendChild(panel_ficha)
            contenedor_panel.appendChild(panel_aspecto)

            panel_aspecto.appendChild(panel_aspecto_descripcion)
            panel_aspecto.appendChild(panel_aspecto_descripcion_indicadores)

            //--------------------------------

            panel_aspecto_descripcion_indicadores.after(boton_aspecto)

            //-------------------------------

            boton_aspecto.addEventListener("click", () => {

                const panel_aspecto_descripcion2 = document.createElement("div")
                panel_aspecto_descripcion2.innerHTML = '<p class="parrafo_editable" contentEditable="true" onkeypress="return limitar(event, this.textContent, 30)">panel_aspecto_descripcion</p> <div class="contenedor_icon"><img class="cambiar_nombre" onclick="cambiar_nombre(this);" src="https://img.icons8.com/material-sharp/20/000000/pencil.png"> <img onclick="eliminar_elemento(this);" class="img_panel_aspecto_descripcion" title="eliminar" src="https://img.icons8.com/ios/20/000000/waste-filled.png"></div>'
                panel_aspecto_descripcion2.contentEditable = false
                panel_aspecto_descripcion2.classList.add("panel-aspecto-descripcion")

                const panel_aspecto_descripcion_indicadores2 = document.createElement("div")
                panel_aspecto_descripcion_indicadores2.textContent = "panel_aspecto_descripcion_indicadores"
                panel_aspecto_descripcion_indicadores2.classList.add("panel-aspecto-descripcion-indicadores")

                panel_aspecto.appendChild(panel_aspecto_descripcion2)
                panel_aspecto.appendChild(panel_aspecto_descripcion_indicadores2)

                boton_aspecto.remove()

                panel_aspecto_descripcion_indicadores2.after(boton_aspecto)

                editarSinInterrupcion();
            })

            const img_panel_aspecto_descripcion = document.querySelector(".img-panel-aspecto-descripcion")

            editarSinInterrupcion();
        })

        //-------------------------------

        function eliminar_elemento(valor) {
            valor.parentNode.parentNode.parentNode.removeChild(valor.parentNode.parentNode.nextElementSibling)
            valor.parentNode.parentNode.parentNode.removeChild(valor.parentNode.parentNode)
        }

        function cambiar_nombre(valor) {
            valor.parentNode.previousElementSibling.contentEditable = true
            valor.parentNode.previousElementSibling.focus();
        }

        function limitar(e, contenido, caracteres) {
            var unicode = e.keyCode ? e.keyCode : e.charCode;

            if (unicode == 8 || unicode == 46 || unicode == 13 || unicode == 9 || unicode == 37 || unicode == 39 || unicode == 38 || unicode == 40)
                return true;

            if (contenido.length >= caracteres) {
                return false;
            }
            return true;
        }

        function editarSinInterrupcion() {
            let cambiar_nombre = document.querySelectorAll('.cambiar_nombre');
            let parrafo_editable = document.querySelectorAll('.parrafo_editable');

            for (let i = 0; i < cambiar_nombre.length; i++) {
                cambiar_nombre[i].addEventListener("click", (e) => {
                    e.stopPropagation();
                })
            }

            for (let i = 0; i < parrafo_editable.length; i++) {
                parrafo_editable[i].addEventListener("click", (e) => {
                    e.stopPropagation();
                })
                
                }
             }   

    </script>
</body>

</html>

1 respuesta 1

1

Para evitar que el codigo se pegue, necesitas retornar falso asi:

$(document).ready(function() {
    $(".contenedor-panel").on("click", ".panel-ficha", function() {
      var t = $(this); 
      var tp = t.next(); 
      var p = t
        .parent()
        .siblings()
        .find(".panel-aspecto");
      tp.slideToggle();
      p.slideUp();
    });
  
    $(".contenedor-panel").on("click", ".panel-aspecto-descripcion", function() {
      var t = $(this);
      var tp = t.next();
      var p = t
        .parent()
        .siblings()
        .find(".panel-aspecto-descripcion-indicadores");
      tp.slideToggle();
      p.slideUp();
    });
  
    $(".editar").on("click", function(e) {
      e.stopPropagation();
    });
  
    let panelAspectoDescripcionIndicadores =
      '<div class="contenedorTotalPreguntas">' +
      '<div class="puntaje">' +
      '<div class="puntaje-hijo puntaje-descripcion">PUNTAJE</div>' +
      '<div class="puntaje-hijo puntaje-puntuacion">1</div>' +
      '<div class="puntaje-hijo puntaje-puntuacion">2</div>' +
      '<div class="puntaje-hijo puntaje-puntuacion">3</div>' +
      '<div class="puntaje-hijo puntaje-puntuacion">4</div>' +
      "</div>" +
      '<div class="observacion">' +
      '<div class="observacion-hijo observacion-descripcionInicial">OBSERVACIONES</div>' +
      '<div class="observacion-hijo observacion-puntuacion">IMPORTANCIA</div>' +
      '<div class="observacion-hijo observacion-puntuacion observacion-malo">MALO</div>' +
      '<div class="observacion-hijo observacion-puntuacion observacion-regular">REGULAR</div>' +
      '<div class="observacion-hijo observacion-puntuacion observacion-bueno">BUENO</div>' +
      '<div class="observacion-hijo observacion-puntuacion observacion-muyBueno">MUY BUENO</div>' +
      '<div class="observacion-hijo observacion-descripcionFinal">OBSERVACIONES</div>' +
      '<div class="observacion-hijo observacion-i">i</div>' +
      '<div class="observacion-hijo observacion-acciones">ACCIONES</div>' +
      "</div>" +
      '<div class="pregunta">' +
      '<form class="pregunta-contenedor">' +
      '<div class="pregunta-hijo pregunta-preguntaInicial" contentEditable="true">AQUI PUEDE COLOCAR SU PREGUNTA</div>' +
      '<div class="pregunta-hijo pregunta-comboBox">' +
      '<select class="comboBox" disabled>' +
      '<option value="Vacio" selected>--Seleccione--</option>' +
      '<option value="Alta">Alta</option>' +
      '<option value="Media">Media</option>' +
      '<option value="Baja">Baja</option>' +
      "</select>" +
      "</div>" +
      '<div class="pregunta-hijo pregunta-radioButton"><input class="radioButton" type="radio" name="rButton" disabled></div>' +
      '<div class="pregunta-hijo pregunta-radioButton"><input class="radioButton" type="radio" name="rButton" disabled></div>' +
      '<div class="pregunta-hijo pregunta-radioButton"><input class="radioButton" type="radio" name="rButton" disabled></div>' +
      '<div class="pregunta-hijo pregunta-radioButton"><input class="radioButton" type="radio" name="rButton" disabled></div>' +
      '<div class="pregunta-hijo pregunta-text"><input class="text" type="text" disabled></div>' +
      '<div class="pregunta-hijo pregunta-subirArchivo"><input class="subirArchivo" type="submit" value="i" disabled></div>' +
      '<div class="pregunta-hijo pregunta-iconos">' +
      '<img src="https://img.icons8.com/material-sharp/20/000000/pencil.png" class="editarPregunta" alt="Editar" title="Editar">' +
      '<img src="https://img.icons8.com/ios/20/000000/waste-filled.png" class="eliminarPregunta" alt="Eliminar" title="Eliminar">' +
      "</div>" +
      "</form>" +
      "</div>" +
      '<input class="btn-pregunta" type="submit" value="AGREGAR UNA PREGUNTA">' +
      "</div>";
  
    $(".btn-crearElemento").on("click", function() {
      $(".panel-aspecto-descripcion-indicadores").html(
        panelAspectoDescripcionIndicadores
      );
    });
  
    $(document).on("click", ".btn-categoria", function() {
      let actual = $(this);
      let btn_categoria_actual = actual.prev();
      $(btn_categoria_actual).html(panelAspectoDescripcionIndicadores);
    });
  
    $(document).on("click", ".btn-pregunta", function() {
      let actual = $(this);
      actual
        .prev()
        .append(
          '<form class="pregunta-contenedor">' +
            '<div class="pregunta-hijo pregunta-preguntaInicial" contentEditable="true">AQUI PUEDE COLOCAR SU PREGUNTA</div>' +
            '<div class="pregunta-hijo pregunta-comboBox">' +
            '<select class="comboBox" disabled>' +
            '<option value="Vacio" selected>--Seleccione--</option>' +
            '<option value="Alta">Alta</option>' +
            '<option value="Media">Media</option>' +
            '<option value="Baja">Baja</option>' +
            "</select>" +
            "</div>" +
            '<div class="pregunta-hijo pregunta-radioButton"><input class="radioButton" type="radio" name="rButton" disabled></div>' +
            '<div class="pregunta-hijo pregunta-radioButton"><input class="radioButton" type="radio" name="rButton" disabled></div>' +
            '<div class="pregunta-hijo pregunta-radioButton"><input class="radioButton" type="radio" name="rButton" disabled></div>' +
            '<div class="pregunta-hijo pregunta-radioButton"><input class="radioButton" type="radio" name="rButton" disabled></div>' +
            '<div class="pregunta-hijo pregunta-text"><input class="text" type="text" disabled></div>' +
            '<div class="pregunta-hijo pregunta-subirArchivo"><input class="subirArchivo" type="submit" value="i" disabled></div>' +
            '<div class="pregunta-hijo pregunta-iconos">' +
            '<img src="https://img.icons8.com/material-sharp/20/000000/pencil.png" class="editarPregunta" alt="Editar" title="Editar">' +
            '<img src="https://img.icons8.com/ios/20/000000/waste-filled.png" class="eliminarPregunta" alt="Eliminar" title="Eliminar">' +
            "</div>" +
            "</form>"
        );
    });
  
    $(document).on("click", ".editarPregunta", function() {
      $(this)
        .parents(".pregunta-contenedor")
        .children(".pregunta-preguntaInicial")
        .attr("contentEditable", "true")
        .focus();
    });
  
    $(document).on("click", ".eliminarPregunta", function() {
      let actual = $(this)
        .parent()
        .parent();
      actual.remove();
    });
  
    $(document).on("paste", ".pregunta-preguntaInicial", function(e) {
      e.preventDefault();
      let datos = event.clipboardData.getData("text/PLAIN");
      document.execCommand("insertText", true, datos);
    });
  
    $(document).on("paste", ".panel-ficha", function(e) {
      e.preventDefault();
      let datos = event.clipboardData.getData("text/PLAIN");
      document.execCommand("insertText", true, datos);
    });

    $(document).on("paste", ".panel-aspecto-descripcion", function(e) {
      e.preventDefault();
      let datos = event.clipboardData.getData("text/PLAIN");
      document.execCommand("insertText", true, datos);
    });

    //TODO: NO FUNCIONA EL preventDefault()
    $(document).on("paste", ".parrafo_editable", function(e){
      var texto = $(this).text() + event.clipboardData.getData('text/PLAIN');
      
       if(texto.length > 30){
         e.preventDefault();
         return false;
       }
     });
  });
* {
        box-sizing: border-box;
    }

    .panel-aspecto-descripcion {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        padding: 10px 15px;
    }

    .panel-ficha {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        padding: 10px 15px;
    }

    .parrafo_editable {
        margin: 0;
    }

    .btn-crearElemento {
        margin-bottom: 10px;
        /* margin-top: 10px; */
    }

    .btn-categoria {
        margin-bottom: 10px;
    }

    .btn-guardar {
        padding: 5px 10px;
        font-size: 12px;
        line-height: 1.5;
        background-color: #00a65a;
        box-shadow: none;
        border: 1px solid #008d4c;
        border-radius: 3px;
        color: #fff;
    }

    .comboBox:hover{
        cursor: not-allowed;
    }

    .text:hover{
        cursor: not-allowed;
    }

    .subirArchivo:hover{
        cursor: not-allowed;
    }

/*========================================================*/

.contenedor-panel{
    /* display: flex;
    flex-direction: column; */
    width: 100%;
    font-weight: 700;
    font-size: 16px;
}

.panel-ficha{
    background: #f5f5f5;
    border: 1px solid #ddd;
    padding: 10px 15px;
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
    box-shadow: 0 2px 1px rgba(0,0,0,.05);
    cursor: pointer;
    margin-bottom: 20px;
    
}

.panel-aspecto{
    display: none;
}

.panel-aspecto-descripcion-indicadores{
    display: none;
}

/*------------------------------------*/

.panel-aspecto-descripcion{
    width: 100%;
    font-weight: 700;
    font-size: 16px;
    background: #D7CCC8;
    border: 1px solid #A1887F;
    padding: 10px 15px;
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
    box-shadow: 0 2px 10px #BCAAA4;
    cursor: pointer;
    margin-bottom: 10px;
}

/*---------------------------------------*/

.panel-aspecto-descripcion-indicadores-descripcion{
    width: 100%;
    font-weight: 700;
    font-size: 16px;
    background: #FFFDE7;
    border: 1px solid #FFF9C4;
    padding: 10px 15px;
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
    box-shadow: 0 2px 10px #BCAAA4;
    cursor: pointer;
    margin-bottom: 10px;
}

/*---------------------------------------*/

.estilos-ficha-supervision{
    font-size: 14px;
    line-height: 1.42857143;
}

/*=================================================================================*/

* {
    box-sizing: border-box;
  }
  
  body {
    margin: 0;
    padding: 0;
  }
  
  /*CONTENEDOR*/
  .contenedorTotalPreguntas {
    width: 100%;
    margin: 0 auto;
    font-family: "Source Sans Pro", sans-serif;
    font-weight: 500;
  }
  
  /*PUNTAJE*/
  .puntaje {
    font-family: "Source Sans Pro", sans-serif;
    font-size: 14px;
    color: white;
    height: 30px;
    background: #3c8dbc;
    display: flex;
    flex-direction: row;
    align-items: center;
    width: 100%;
  }
  
  .puntaje-hijo {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 30px;
  }
  
  .puntaje-descripcion {
    width: 41%;
  }
  
  .puntaje-puntuacion {
    width: 8%;
  }
  
  /*OBSERVACIONES*/
  .observacion {
    font-family: "Source Sans Pro", sans-serif;
    font-size: 14px;
    color: #333;
    height: 30px;
    background: #ecf0f5;
    display: flex;
    flex-direction: row;
    align-items: center;
    width: 100%;
    margin-top: 5px;
  }
  
  .observacion-hijo {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 30px;
  }
  
  .observacion-descripcionInicial {
    width: 33%;
  }
  
  .observacion-puntuacion {
    width: 8%;
  }
  
  .observacion-descripcionFinal {
    width: 16%;
  }
  
  .observacion-i {
    width: 4%;
  }
  
  .observacion-malo {
    background-color: #fb86af;
  }
  
  .observacion-regular {
    background: #fbd386;
  }
  
  .observacion-bueno {
    background: #cdf69d;
  }
  
  .observacion-muyBueno {
    background: #cdf69d;
  }
  
  .observacion-acciones {
    /* width: 4%; */
    flex-grow: 1;
  }
  
  /*PREGUNTA*/
  .pregunta {
    /* font-family: "Source Sans Pro", sans-serif;
        font-size: 14px;
        color: #333;
        height: 55px;
        display: flex;
        flex-direction: row;
        align-items: center; */
    width: 100%;
  }
  
  .pregunta-contenedor {
    font-family: "Source Sans Pro", sans-serif;
    font-size: 14px;
    color: #333;
    /* height: 49px; */
    height: auto;
    display: flex;
    flex-direction: row;
    align-items: center;
    width: 100%;
  }
  
  .pregunta-hijo {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 49px;
  }
  
  .pregunta-preguntaInicial {
    /* display: flex; */
    display: block;
    width: 33%;
    height: auto;
    /* justify-content: flex-start; */
    padding: 15px 15px;
    text-align: justify;
}
  
  .pregunta-comboBox {
    width: 8%;
  }
  
  /**/
  select {
    cursor: pointer;
  }
  
  option {
    cursor: pointer;
  }
  /**/
  
  .pregunta-radioButton {
    width: 8%;
  }
  
  /**/
  input[type="radio"] {
    cursor: pointer;
  }
  /**/
  
  .pregunta-text {
    width: 16%;
  }
  
  /*text esta dentro de .pregunta-text*/
  
  .text {
    padding: 6px 12px;
    height: 35px;
    width: 230px;
    border: 1px solid #d2d6de;
  }
  
  /*text esta dentro de .pregunta-text*/
  
  .pregunta-subirArchivo {
    width: 4%;
  }
  
  .pregunta-iconos {
    /* width: 4%; */
    flex-grow: 1;
    justify-content: center;
  }
  
  /**/
  .pregunta-iconos img {
    cursor: pointer;
    padding: 0 5px;
  }
  /**/
  
  /*btn-pregungta esta afuera del contenedor "pregunta"*/
  
  .btn-pregunta {
    margin-bottom: 10px;
  }
  
  /*btn-pregungta esta afuera del contenedor "pregunta"*/
<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>Administración | Fichas de Evaluación</title>
    <meta content='width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no' name='viewport'>

</head>



<body class="skin-blue">

                            <div class="box-body">
                                <input type="submit" class="btn-crearElemento" value="Crear menú desplegable">
                                <div class="contenedor-panel"></div>
                                <!--<input class="btn-guardar" type="submit" value="GUARDAR CAMBIOS">-->
                            </div>
                        

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

    <script>
        //ELEMENTOS PRINCIPALES
        let btn_crearElemento = document.querySelector(".btn-crearElemento")
        const contenedor_panel = document.querySelector(".contenedor-panel")

        btn_crearElemento.addEventListener("click", function() {

            //CREACION DE VARIABLES CON SUS ATRIBUTOS EN DONDE SE ALOJARAN LOS DIV CREADOS
            const panel_ficha = document.createElement("div")//TODO: CAMBIO POR AQUI : onpaste="evitarPegarContenido();"
            panel_ficha.innerHTML = '<p class="parrafo_editable" contentEditable="true" onkeypress="return limitar(event, this.textContent, 30)">panel_ficha</p> <div class="contenedor_icon"><img class="cambiar_nombre" onclick="cambiar_nombre(this);" src="https://img.icons8.com/material-sharp/20/000000/pencil.png"> <img onclick="eliminar_elemento(this);" class="img-panel-aspecto-descripcion" title="eliminar" src="https://img.icons8.com/ios/20/000000/waste-filled.png"></div>'
            panel_ficha.contentEditable = false
            panel_ficha.classList.add("panel-ficha")

            const panel_aspecto = document.createElement("div")
            panel_aspecto.innerHTML = "panel_aspecto"
            panel_aspecto.classList.add("panel-aspecto")

            const panel_aspecto_descripcion = document.createElement("div")
            panel_aspecto_descripcion.innerHTML = '<p class="parrafo_editable" contentEditable="true" onkeypress="return limitar(event, this.textContent, 30)">panel_aspecto_descripcion</p> <div class="contenedor_icon"><img class="cambiar_nombre" onclick="cambiar_nombre(this);" src="https://img.icons8.com/material-sharp/20/000000/pencil.png"> <img onclick="eliminar_elemento(this);" class="img-panel-aspecto-descripcion" title="eliminar" src="https://img.icons8.com/ios/20/000000/waste-filled.png"></div>'
            panel_aspecto_descripcion.contentEditable = false
            panel_aspecto_descripcion.classList.add("panel-aspecto-descripcion")

            const panel_aspecto_descripcion_indicadores = document.createElement("div")
            panel_aspecto_descripcion_indicadores.textContent = "panel_aspecto_descripcion_indicadores"
            panel_aspecto_descripcion_indicadores.classList.add("panel-aspecto-descripcion-indicadores")

            //-------------------------------

            const boton_aspecto = document.createElement("input")
            boton_aspecto.setAttribute("class", "btn-categoria")
            boton_aspecto.setAttribute("type", "submit")
            boton_aspecto.setAttribute("value", "AGREGAR UNA CATEGORIA")

            //-------------------------------

            contenedor_panel.appendChild(panel_ficha)
            contenedor_panel.appendChild(panel_aspecto)

            panel_aspecto.appendChild(panel_aspecto_descripcion)
            panel_aspecto.appendChild(panel_aspecto_descripcion_indicadores)

            //--------------------------------

            panel_aspecto_descripcion_indicadores.after(boton_aspecto)

            //-------------------------------

            boton_aspecto.addEventListener("click", () => {

                const panel_aspecto_descripcion2 = document.createElement("div")
                panel_aspecto_descripcion2.innerHTML = '<p class="parrafo_editable" contentEditable="true" onkeypress="return limitar(event, this.textContent, 30)">panel_aspecto_descripcion</p> <div class="contenedor_icon"><img class="cambiar_nombre" onclick="cambiar_nombre(this);" src="https://img.icons8.com/material-sharp/20/000000/pencil.png"> <img onclick="eliminar_elemento(this);" class="img_panel_aspecto_descripcion" title="eliminar" src="https://img.icons8.com/ios/20/000000/waste-filled.png"></div>'
                panel_aspecto_descripcion2.contentEditable = false
                panel_aspecto_descripcion2.classList.add("panel-aspecto-descripcion")

                const panel_aspecto_descripcion_indicadores2 = document.createElement("div")
                panel_aspecto_descripcion_indicadores2.textContent = "panel_aspecto_descripcion_indicadores"
                panel_aspecto_descripcion_indicadores2.classList.add("panel-aspecto-descripcion-indicadores")

                panel_aspecto.appendChild(panel_aspecto_descripcion2)
                panel_aspecto.appendChild(panel_aspecto_descripcion_indicadores2)

                boton_aspecto.remove()

                panel_aspecto_descripcion_indicadores2.after(boton_aspecto)

                editarSinInterrupcion();
            })

            const img_panel_aspecto_descripcion = document.querySelector(".img-panel-aspecto-descripcion")

            editarSinInterrupcion();
        })

        //-------------------------------

        function eliminar_elemento(valor) {
            valor.parentNode.parentNode.parentNode.removeChild(valor.parentNode.parentNode.nextElementSibling)
            valor.parentNode.parentNode.parentNode.removeChild(valor.parentNode.parentNode)
        }

        function cambiar_nombre(valor) {
            valor.parentNode.previousElementSibling.contentEditable = true
            valor.parentNode.previousElementSibling.focus();
        }

        function limitar(e, contenido, caracteres) {
            var unicode = e.keyCode ? e.keyCode : e.charCode;

            if (unicode == 8 || unicode == 46 || unicode == 13 || unicode == 9 || unicode == 37 || unicode == 39 || unicode == 38 || unicode == 40)
                return true;

            if (contenido.length >= caracteres) {
                return false;
            }
            return true;
        }

        function editarSinInterrupcion() {
            let cambiar_nombre = document.querySelectorAll('.cambiar_nombre');
            let parrafo_editable = document.querySelectorAll('.parrafo_editable');

            for (let i = 0; i < cambiar_nombre.length; i++) {
                cambiar_nombre[i].addEventListener("click", (e) => {
                    e.stopPropagation();
                })
            }

            for (let i = 0; i < parrafo_editable.length; i++) {
                parrafo_editable[i].addEventListener("click", (e) => {
                    e.stopPropagation();
                })
                
                }
             }   

    </script>
</body>

</html>

6
  • Genial amigo @alanfcm, pero por qué razón fue necesario poner el false, si con los otros e.preventDefault no tenia ningún problema. O es que mucho abusaba de los e.preventDefault, ¿tiene un limite?. Commented el 10 abr. 2019 a las 17:49
  • 1
    OP no tiene ningun formulario. Ademas preventDefault no sirve para que la pagina no se refresque cuando envias un formulario. Sirve para que la accion default del evento no se ejecute.
    – alanfcm
    Commented el 10 abr. 2019 a las 18:07
  • 1
    @GianFrancoAlexisPomaVidal el problema era que tienes dos handlers que escuchan por el evento paste y el segundo handler del contenedor con la clase panel-ficha tambien se estaba ejecutando.
    – alanfcm
    Commented el 10 abr. 2019 a las 18:10
  • 1
    Gracias nuevamente @alanfcm, logre entender a la perfección ;) Commented el 10 abr. 2019 a las 19:32
  • 2
    @GianFrancoAlexisPomaVidal entendido. Agradezco la aclaración de Alan, ya que estaba equivocado en ese sentido, así que retiro lo dicho.
    – A. Cedano
    Commented el 10 abr. 2019 a las 19:42

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.