How to fix a value in a textbox?

问题:

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

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

回答2:

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>

回答3:

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>

回答4:

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>

回答5:

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/

回答6:

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

回答7:

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>