0

He creado una función para que evite que el usuario escriba de más al momento de cambiar el nombre a un párrafo. Para cambiar de nombre hay que darle click a el icono de editar, pero NO me llega a validar el limite.

let boton = document.querySelector(".boton");
      let contenedor = document.getElementById("contenedor");
      let enlaces = document.getElementsByClassName("enlace");
      let changeName = document.getElementsByClassName("editar");
      let editable = document.querySelectorAll(".editable");

      boton.addEventListener("click", () => {
        let li = document.createElement("li");
        li.innerHTML =
          "<p class='editable'>Contenido " +
          Math.random() +
          "</p>" +
          "<div class='contenedor_icon'><img class='editar' src='https://img.icons8.com/metro/20/000000/pencil.png'><img class='enlace' src='https://img.icons8.com/metro/26/000000/delete-sign.png'></div>";

        contenedor.appendChild(li);

        eliminar();
        cambiar_nombre();
      });

      eliminar();
      cambiar_nombre();
      
      //========================FUNCIONES=======================

      function eliminar() {
        for (let i = 0; i < enlaces.length; i++) {
          enlaces[i].onclick = function(e) {
            let content = e.target.parentNode.parentNode.parentNode;
            let li = e.target.parentNode.parentNode;
            content.removeChild(li);
          };
        }
      }

      function cambiar_nombre() {
        for (let i = 0; i < changeName.length; i++) {
          changeName[i].onclick = e => {
            let p = e.target.parentNode.previousElementSibling;
            p.contentEditable = true;
            p.style.maxWidth = "280px";

            p.focus();
          };
        }

        for (let i = 0; i < editable.length; i++) { //ACA ME FALLA
          editable[i].onkeyup = () => {
            limitar(event, editable[i].textContent, 20);
          };
        }
      }

      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;
      }
body {
      font-size: sans-serif;
      max-width: 400px;
    }
    #contenedor li {
      padding: 18px;
      margin: 8px 0;
      background: #ddd;
      list-style: none;
    }
    #contenedor li {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      /* padding: 3px 7px;
        background: #fbfbfb; */
    }

    .editar {
      margin-right: 10px;
      cursor: pointer;
    }

    .contenedor_icon {
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .enlace {
      cursor: pointer;
    }

    .boton {
      cursor: pointer;
    }
<body>
    <h1>Como agregar o eliminar elementos a una div</h1>

    <div id="contenedor">
      <li>
        <p class="editable">Contenido 1</p>
        <div class="contenedor_icon">
          <img
            class="editar"
            src="https://img.icons8.com/metro/20/000000/pencil.png"
          /><img
            class="enlace"
            src="https://img.icons8.com/metro/26/000000/delete-sign.png"
          />
        </div>
      </li>
      <li>
        <p class="editable">Contenido 2</p>
        <div class="contenedor_icon">
          <img
            class="editar"
            src="https://img.icons8.com/metro/20/000000/pencil.png"
          /><img
            class="enlace"
            src="https://img.icons8.com/metro/26/000000/delete-sign.png"
          />
        </div>
      </li>
    </div>

    <input
      class="boton"
      type="button"
      value="Agregar elemento"
      style="float: right;"
    />
    </body>

6
  • que tipo de framework utilizas para hacer editable el elemento? si fuera codigo HTML puro, la edición la puedes hacer a traves de un elemento INPUT y limitar el ingreso con MAXLENGTH. Complementa tu pregunta el 15 mar. 2019 a las 20:20
  • No estoy usando ningún framework, solo Javascript puro, además con el maxlength no me funciono en la etiqueta <p> :( el 15 mar. 2019 a las 20:26
  • Lo que yo quiero es que en el parrafo este validado la cantidad de caracteres el 15 mar. 2019 a las 20:27
  • esa caracteristica no te va a funcionar en un parrafo, prueba con este ejemplo y vas a ver que te liminta a 10 caracteres. <input type="textarea" maxlength="10"> el 15 mar. 2019 a las 20:44
  • 1
    ya he revisado tu codigo, y al trazarlo, creo que lo que puedes hacer es cambiar en tu codigo, o mas bien agregar, en la funcion limitar lo siguiente: donde dice "if (contenido.length >= caracteres) return false;" cambiarlo a por: "if (contenido.length >= caracteres) { e.preventDefault(); return false;)" el 15 mar. 2019 a las 22:18

1 respuesta 1

0

Era más que obvio, solo tenia que poner la función limitar como atributo en el parrafo y colocarle los siguientes valores:

<p onkeydown="return limitar(event, this.textContent, 30)">Contenido editable</p>

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.