How to fix a value in a textbox?

Question

I have a textbox to save the user facebook's url.

<tr>
    <td>
        Facebook:
    </td>
    <td>
        <input style="width:300px" type="text" name="facebook" value="http://www.facebook.com/$facebook">
    </td>
</tr>

How can i make the value "http://www.facebook.com/" fixed and uneditable?

UPDATE:

the $facebook part needs to be editable!!

Check the latest edit to my answer: [LINK](http://stackoverflow.com/a/12878380/1190388) provided. — hjpotter92, Oct 14 '12 at 01:21
I don't understand. Do you want that by default the `value` in the textbox will be `http://www.facebook.com/$facebook`? And then, what? Which part do you want to be editable? — Mosh Feu, Dec 23 '15 at 07:30

score 4 · Answer 1 · edited Dec 23 '15 at 07:22

I think you are asking to have "http://www.facebook.com/" uneditable, but be able to edit the remainder of the url?

Something like the below snippet would be the simplest approach. Some tweaking of the styles as in the CSS below would make it more presentable.

table {
    width: 500px;   
}
.fakey {
    border: solid 1px; 
    color: #ccc; 
    font-family: sans-serif;
    font-size: .9em;    
}

.fakey input {
    border: none;   
    outline: none;
    font-family: sans-serif;
    font-size: .9em; 
    width: 200px;    
}

<table>
    <tr>
        <td>Facebook:</td>
        <td>
            <div class="fakey">http://www.facebook.com/<input  type="text" name="facebook" value="$facebook" /></div>
        </td>
    </tr>        
</table>

i am using it that way, but its ugly. I want to show `http://www.facebook.com/` inside the text box. — Lucas Matos, Oct 14 '12 at 00:55

DDA · Answer 2 · 2015-12-23T06:29:05.800

You can use javascript to force the prefix to remain entered at all cost.

 $('input.facebookUrl').keyup(function(){
        if (
            ($(this).val().length > 0) && ($(this).val().substr(0,24) != 'http://www.facebook.com/')
            || ($(this).val() == '')
            ){
            $(this).val('http://www.facebook.com/');    
        }
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<tr>
    <td>
        Facebook:
    </td>
    <td>
        <input style="width:300px" type="text" class="facebookUrl" name="facebook" value="http://www.facebook.com/$facebook">
    </td>
</tr>

score 0 · Accepted Answer · edited Jun 20 '20 at 09:12

There are two methods to do this. One is to add the attribute disabled="disabled" to it, or add readonly to it.

Both work differently. What you need might be disabled="disabled" attribute.

EDIT

fiddle updated. You should include following jQuery code:

$(document).ready(function() {
    $("#inpt").val('http://www.facebook.com/$facebook');
    $("#inpt").on('change', function() {
        var tval = $(this).val();
        $(this).val('http://www.facebook.com/' + tval.substring(24));
    });
});

You may use keyboard events too, I am myself a beginner in jQuery, hence this basic piece of code. :) Also, update the input tag to this:

<input id="inpt" style="width:300px" type="text" name="facebook" value="Any VALUE YOU WANT">

In that case, you'd be needing JavaScript – hjpotter92 Oct 14 '12 at 00:55 — hjpotter92, Oct 14 '12 at 00:55

score 0 · Answer 4 · answered Oct 14 '12 at 00:50

0

try it like this

<tr>
    <td>
        Facebook:
    </td>
    <td>
        <input style="width:300px" disabled="disabled" type="text" name="facebook" value="http://www.facebook.com/$facebook" />
    </td>
</tr>

answered Oct 14 '12 at 00:50

webNeat

2,768
1
20
22

So then you should add some javascript to control this, CSS alone is not suffisant – webNeat Oct 14 '12 at 01:07

score 0 · Answer 5 · answered Oct 14 '12 at 02:58

I don't know if this is what your looking for but it is the best I could do.

 $("#input").keypress(function(ev){
      var value = "www.facebook.com/";
      var tval = this.value;
      var c = ev.charCode || ev.keyCode;
      this.selectionStart = this.selectionEnd = this.value.length;
      if (tval.length == value.length && c == 8){
           ev.preventDefault();
      }
      this.value = value + tval.substring(value.length);
 });

Here's the JSFiddle:

http://jsfiddle.net/FaxE4/104/

score 0 · Answer 6 · edited Feb 20 '17 at 02:52

0

A very simple way is to use the readonly attribute in the "input" HTML tag.

disabled is another property that can be usable.

References: https://www.w3schools.com/tags/tag_input.asp

edited Feb 20 '17 at 02:52

Fabio says Reinstate Monica

5,271
9
40
61

answered Feb 19 '17 at 23:04

Carlos Rafael

51
4

score 0 · Answer 7 · answered Apr 21 '17 at 03:22

0

You may try this.

<tr>
    <td>
        Facebook:
    </td>
    <td>
        <input style="width:300px" type="text" name="facebook" value="http://www.facebook.com/$facebook" readonly>
    </td>
</tr>

answered Apr 21 '17 at 03:22

Anis

23
6

How to fix a value in a textbox?

7 Answers7

EDIT

Linked