Question: 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.

Answer: 
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">

```
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.