Question 298802 in Html Question posted in
Some basic documentation can be found here.

Html – How to make a part of <textarea> element non editable in dynamic manner?

I have a <textarea> element, where users can input text. I would like to create a condition where only the last 10 characters written in the textarea can be edited.

For example user writes: My name is Joe. In this case the user can edit only the following part: me is Joe..

I would also like it to be dynamic, meaning if user continues writing: My name is Joe. I am 30 years old., then the editable part would be: years old.

<div id="container">
  <textarea id="inputText" name="inputText" wrap="soft"></textarea>
</div>

Does anyone have suggestions how to achieve this using JavaScript?

Tags:

2

Answers


  1. 0

    This can be done using javascript. You have to listen for the ‘input’ event of that textarea (and the onchange event also for solidity). When the user inputs you, have to save the state of that textarea into a variable in memory and then after each input you have to check if the first part (not allowed to edit) still matches, if not then replace the textarea content with your saved state.

    Let me show a demo with some code:

    var input = document.querySelector("#inputText");
       var currentValue = "";
       var restrictedLength = 0;
       input.addEventListener("input", function(){
          
          var restrictedPart = currentValue.substr(0,restrictedLength );
          var isAllowedEdit = input.value.length>=restrictedLength
 && input.value.substr(0,restrictedLength) == restrictedPart;
          if( isAllowedEdit ){
              currentValue = input.value;
              var newRstrictedLength = currentValue.length-10;
              if( newRstrictedLength>=restrictedLength) {
                  restrictedLength = newRstrictedLength;
              }
          } else {
              input.value = currentValue; 
          }
    
       });
    <div id="container">
      <textarea id="inputText" name="inputText" wrap="soft"></textarea>
    </div>

    Keep in mind that this code is only an idea, selecting a portion of the text and pasting things (not writing letter by letter) will make some weird behavior. You should consider covering that part too.

    Login or Signup to reply.
  2. 0

    Try this:

      document.addEventListener("DOMContentLoaded", function () {
    const textarea = document.getElementById("inputText");

    textarea.addEventListener("input", function () {
      // Get the text content of the textarea
      const text = textarea.value;

      // Set the last 10 characters as editable
      const editablePart = text.slice(-10);

      // Set readonly attribute for the entire text
      textarea.setAttribute("readonly", true);

      // Remove readonly attribute for the last 10 characters
      textarea.removeAttribute("readonly", false);

      // Set the new value of the textarea
      textarea.value = editablePart;
    });
  });
    <div id="container">
  <textarea id="inputText" name="inputText" wrap="soft"></textarea>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search