Санкционировать предел символов в параграфе <p>

Я создал функцию для того, чтобы он избежал того, чтобы пользователь написал больше в момент меняния имени в параграф. Чтобы изменять имя нужно выходить ему click на значок издавания, но не прибывает ко мне, чтобы санкционировать предел.

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>
0
задан 15.03.2019, 22:40
1 ответ

Он состоял mГЎs в том, что он препятствовал, только был должен помещать ее funciГіn граничить как признак в параграфе и размещать следующую стоимость:

<p onkeydown="return limitar(event, this.textContent, 30)">Contenido editable</p>
0
ответ дан 02.12.2019, 05:34