Comment réparer une valeur dans une zone de texte?

J'ai une zone de texte pour enregistrer l'utilisateur facebook url.

HTML:

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

Comment puis-je faire de la valeur "http://www.facebook.com/" fixe et non modifiable?

Mise à JOUR:

la $facebook partie doit être modifiable!!

  • Vérifiez la dernière édition de ma réponse: LIEN fourni.
  • Je ne comprends pas. Voulez-vous que par défaut, la value dans la zone de texte sera http://www.facebook.com/$facebook? Et puis, quoi? La partie de qui voulez-vous être modifiable?
InformationsquelleAutor Lucas Matos | 2012-10-14
  1. 0

    Il existe deux méthodes pour ce faire. L'un est d'ajouter l'attribut disabled="disabled", ou ajouter readonly à elle.

    À la fois le travail différemment. Ce que vous devez peut-être disabled="disabled" attribut.

    MODIFIER

    violon mis à jour. Vous devez inclure les suivantes 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));
    });
});

    Vous pouvez utiliser les événements de clavier trop, je suis moi-même un débutant en jQuery, donc cette partie de code. 🙂 Aussi, mise à jour de la input point:

    <input id="inpt" style="width:300px" type="text" name="facebook" value="Any VALUE YOU WANT">
    • le $facebook partie doit être modifiable!!
    • Dans ce cas, vous auriez besoin de JavaScript
    InformationsquelleAutor hjpotter92
  2. 3

    Je pense que vous avez à demander à avoir des "http://www.facebook.com/" non modifiable, mais être en mesure de modifier le reste de l'url?

    Quelque chose comme ci-dessous l'extrait de code serait l'approche la plus simple. Quelques réglages des styles dans le fichier CSS ci-dessous le rendre plus présentable.

    CSS:

    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;    
}

    HTML:

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

    • je l'utilise de cette façon, mais son laid. Je veux montrer http://www.facebook.com/ à l'intérieur de la zone de texte.
    InformationsquelleAutor ultranaut
  3. 2

    Vous pouvez utiliser du javascript pour forcer le préfixe de rester saisi à tout prix.

    JS:

     $('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/');    
        }
    });

    HTML:

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

    InformationsquelleAutor DDA
  4. 0

    essayer comme ça

    <tr>
    <td>
        Facebook:
    </td>
    <td>
        <input style="width:300px" disabled="disabled" type="text" name="facebook" value="http://www.facebook.com/$facebook" />
    </td>
</tr>
    • le $facebook partie doit être modifiable!!
    • Alors vous devez ajouter un peu de javascript pour le contrôle de cette, CSS seul n'est pas suffisant
    • coup d'oeil ici : jsfiddle.net/FaxE4/21
    InformationsquelleAutor webNeat
  5. 0

    Je ne sais pas si c'est ce que vous cherchez, mais c'est le mieux que je puisse faire.

     $("#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);
 });

    Voici le JSFiddle:

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

    InformationsquelleAutor Bruno Calza
  6. 0

    Un moyen très simple est d'utiliser le readonly l'attribut dans le "entrée" dans la balise HTML.

    désactivé est une autre propriété qui peut être utilisable.

    Références:
    https://www.w3schools.com/tags/tag_input.asp

    InformationsquelleAutor Carlos Rafael
  7. 0

    Vous pouvez essayer cette. 

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