CODEWITHSUNDEEP
htmltextbox
Lucas Matos
Lucas Matos

Reputation: 1162

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

Upvotes: 3

Views: 32848

Answers (7)

Anis
Anis

Reputation: 23

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>

Upvotes: 0

Carlos Rafael
Carlos Rafael

Reputation: 51

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

Upvotes: 0

ultranaut
ultranaut

Reputation: 2140

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>

Upvotes: 4

DDA
DDA

Reputation: 989

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>

Upvotes: 2

Bruno Calza
Bruno Calza

Reputation: 2780

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/

Upvotes: 0

hjpotter92
hjpotter92

Reputation: 80639

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

Upvotes: 0

webNeat
webNeat

Reputation: 2828

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>

Upvotes: 0

Related Questions