CODEWITHSUNDEEP
javascriptjqueryhtml
hakki
hakki

Reputation: 6521

Not editable,removable part of a textarea

I have a simple textarea and It has a default value. I want to hold this value everytime. User should not remove this value but he can add extra string.

<textarea>This is contstant</textarea>

As you see above. It has a default value. How can I protect this value? But user can add something after default value like below.

<textarea>This is contstant and extra things by user</textarea>

So how can do a partially editable textarea with default value?

Upvotes: 1

Views: 2118

Answers (2)

Aaron Digulla
Aaron Digulla

Reputation: 328614

I would go this way:

  1. Style the textarea to remove the border.
  2. Put a div on top which contains the constant text.
  3. Wrap both elements in a div to give it a common border.

That way, the constant text will appear as if it was part of the textarea but it's not.

When you submit the form, prepend the static text to the field value.

Upvotes: 0

user3886234
user3886234

Reputation:

You can attach an event handler to the <textarea> that does a simple validation every time it changes. If it tries to change to where your constant is partially destroyed, overwrite the X characters of the string value.

$('#foo').keydown(function () {
    if ($(this).val().indexOf("This is constant.  ") !== 0) {
        var length = "This is constant.  ".length;
        var current = $(this).val();
        var after = current.slice(length);

        $(this).val("This is constant.  " + after);
    }
});

Here is a example on JSFiddle.

I recommend using JQuery for this because <textarea> doesn't actually have a value, or I think even a text attribute that you can check. JQuery just abstracts away <textarea>'s quirks.

Upvotes: 2

Related Questions