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!!

Answer 1

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

Answer 2

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>

Answer 3

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>

Answer 4

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>

Answer 5

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>

Answer 6

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/