41

I have a search form

<input id="price_from" value="price from ">
<input id="price_to" value="price to ">
<button>search</button>

How can I disable editing of dafault text? When user starts to type in price amount it's not possible to edit "price from " and "price to " but they stay in input field. I've tried different mask plugins for jquery but they didn't show default text untill you focus on field and don't provide option for custom text. Only placeholders an chars.

halofourteen
  • 940
  • 2
  • 10
  • 17
  • 1
    Possible duplicate of [HTML text input field with currency symbol](http://stackoverflow.com/questions/2913236/html-text-input-field-with-currency-symbol) – Carsten Jan 30 '17 at 19:57

5 Answers5

134

You can either use the readonly or the disabled attribute. Note that when disabled, the input's value will not be submitted when submitting the form. 

<input id="price_to" value="price to" readonly="readonly">
<input id="price_to" value="price to" disabled="disabled">
chrki
  • 6,143
  • 6
  • 35
  • 55
  • 2
    Also It's important to remind that even using readonly attribute, you should never trust user input which includes form submissions. Because, it can still be modified with Firebug, DOM Inspector, etc, or they can just submit a HTTP request without using the browser at all. – Mojtaba Rezaeian Sep 05 '17 at 08:52
  • readonly is recommended if you want to implement jquery trigger event on the element. – wpcoder Oct 29 '17 at 00:57
  • @Mojtab , so how to can stop user modified with firebug. Is there any solution in php ? Plz share – Fawwad Jul 24 '18 at 07:19
  • @Fawwad You can't prevent anyone from modifying the form or request with Firebug or the browser's devtools – chrki Jul 24 '18 at 08:32
  • 1
    @fawwad One of the simplest and basic methods is to set again readonly fields to their predefined value from code, before proccessing the recieved post data. – Mojtaba Rezaeian Jul 25 '18 at 09:14
4

I'm not sure I understand the question correctly, but if you want to prevent people from writing in the input field you can use the disabled attribute.

<input disabled="disabled" id="price_from" value="price from ">
Schoof
  • 2,715
  • 5
  • 29
  • 41
4

I don't think all the other answerers understood the question correctly. The question requires disabling editing part of the text. One solution I can think of is simulating a textbox with a fixed prefix which is not part of the textarea or input.

An example of this approach is:

<div style="border:1px solid gray; color:#999999; font-family:arial; font-size:10pt; width:200px; white-space:nowrap;">Default Notes<br/>
<textarea style="border:0px solid black;" cols="39" rows="5"></textarea></div>

The other approach, which I end up using is using JS and JQuery to simulate "Disable" feature. Example with pseudo-code (cannot be specific cause of legal issue):

  // disable existing notes by preventing keystroke
  document.getElementById("txtNotes").addEventListener('keydown', function (e) {
    if (cursorLocation < defaultNoteLength ) {
            e.preventDefault();
  });

    // disable existing notes by preventing right click
    document.addEventListener('contextmenu', function (e) {
        if (cursorLocation < defaultNoteLength )
            e.preventDefault();
    });

Thanks, Carsten, for mentioning that this question is old, but I found that the solution might help other people in the future.

Freddy Yang
  • 41
  • 3
  • Hi Freddy, and welcome! I (and apparently the OP) agree with you that the question was about only part of the input text. At least that's what the OP mentions in their own answer with the reference to [this one, show casing what you're also proposing](http://stackoverflow.com/a/2913366/5127499). I.e. you seem to have understood the OP correctly. Unfortunately the question has been posted four years ago. ;) – Carsten Jan 30 '17 at 20:46
0

How about disabled=disabled:

<input id="price_from" value="price from " disabled="disabled">​​​​​​​​​​​​

Problem is if you don't want user to edit them, why display them in input? You can hide them even if you want to submit a form. And to display information, just use other tag instead.

Gnijuohz
  • 3,294
  • 6
  • 32
  • 47
0

So, i came across this problem in angular and I made a directive to solve this problem. so my problem was with social link urls. so my directive is some what like..

below are my input fields with default urls:

<input type="text" formControlName="twitter" id="twitter" class="form-control inputBox" placeholder="URL" defaultValue>

and my directive with name "defaultValue" is:


import { Directive, ElementRef, HostListener } from '@angular/core';

@Directive({
  selector: 'input[defaultValue]',
})
export class DefaultValueDirective {
  constructor(private _el: ElementRef) {}

  @HostListener('input', ['$event']) onInputChange(event) {
    const element = this._el.nativeElement;
    console.log(element);
    switch (element.id) {
     
      case 'twitter':
        if (!element.value.includes('https://www.twitter.com/')) {
          this._el.nativeElement.value = 'https://www.twitter.com/';
          event.stopPropagation();
        }
        break;
   
    }
  }
}

Hope it works for you.

Sunil Bijlwan
  • 19
  • 6