How to Make a Text Input Non-Editable

How do I make a text input non-editable?

<input type="text" value="3" class="field left" readonly>

No styling necessary.

See <input> on MDN https://developer.mozilla.org/en/docs/Web/HTML/Element/input#Attributes

How do I make a text input non-editable for a part of it?

You can capture the keyup and blur (in case user directly copy paste the value in textbox) event

function handleEv( event )
{
   var thisObj = event.currentTarget;
   var fixedValue = thisObj.getAttribute( "data-fixedvalue" );
   if ( thisObj.value.indexOf( fixedValue )  != 0 )
   {
      console.log(thisObj.value, fixedValue);
      event.preventDefault();
      thisObj.value = fixedValue;
   }
}

Demo of sample implementation

var el = document.querySelector( ".telinfo" );el.addEventListener( "keyup", handleEv);el.addEventListener( "blur", handleEv);

function handleEv( event ){   var thisObj = event.currentTarget;   var fixedValue = thisObj.getAttribute( "data-fixedvalue" );   if ( thisObj.value.indexOf( fixedValue )  != 0 )   {      console.log(thisObj.value, fixedValue);      event.preventDefault();      thisObj.value = fixedValue;   }}

<input type="text" value="+98912314789" class="telinfo" data-fixedvalue = "+9891">

How can I make a text input non editable with React?

The answer you used is non-normative.

Instead of using

 ... readonly>

use the more common HTML syntax as follows:

readonly='readonly'

and then pick one of the many ways to implement in react / JSX.

Kivy: how do I make a non-editable text input?

The readonly property is your friend

TextInput:
    id:out
    background_color: (0, 0, 0, 1)
    foreground_color: (0, 1, 0, 1)
    multiline: True
    text:""
    readonly: True 

How do I make a text input non-editable and secure?

No there is not. The user can send any GET and POST variables he wants. You have to validate the user input in your php script (I assume you use php because of the used tags)

---

Related Topics