How to make a text be edited only once in Javascript/Html

Asked

Viewed 47 times

1

    function saveImg() {
        let out = [];
        const imgData = canvas.toDataURL();
        const fav = document.getElementById("favourites");
        out.push(`<div>`);
        out.push(`<img src= ${imgData} height = "200" alt = "image">`);
        out.push(`<form action="/favorites" method="POST">`);
        out.push(`<input type="hidden" value=${imgData} name="dataURL">`);
        out.push(`<input type="hidden" value=${id++} name="_id">`);
        out.push(`<input type="text" value="" name="name" id="name" readonly>`);
        out.push(`<label for="name"></label>`);
        out.push(`<br>`);
        out.push(`<input type="submit"  value="SUBMIT">`);
        out.push(`</form>`);
        out.push(`</div>`);
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        history.clear();
        fav.innerHTML += out.join("");
    }

In this code one can press a button to save a drawing made on a canvas, and then give a name to the saved image, however, after writing the name I wanted to make the input become "readonly". What alternatives exist for this purpose?

javascript html

2 answers

5

Disabling input works for you?

function disable() {
  document.getElementById("myText").disabled = true;
}
<html>
<body>

Input: <input type="text" id="myText">

<p>Clique no botão para desabilitar.</p>

<button onclick="disable()">Desabilitar input</button>

</body>
</html>

4


Here I used a generic button, but you can use only include the 'disableInput' function in the main code

<input type="text" id="imageName"/>
<button type="button" onClick="disableInput()">Salvar</button>

<script type="text/javascript">
  const disableInput = () => {
      const imageNameInput = document.querySelector('#imageName')
      imageNameInput.disabled = true
      // Se preferir, pode optar pelo atributo 'readOnly' para evitar esmaecer o input
      // imageNameInput.readOnly = true
  }
</script>

Browser other questions tagged javascript html

You are not signed in. Login or sign up in order to post.