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>