3

ユーザーのFacebookのURLを保存するテキストボックスがあります。

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

値 " http://www.facebook.com/ " を修正して編集不可にするにはどうすればよいですか?

アップデート：

パーツは編集可能にする$facebook必要があります!!

4

7 に答える 7

4

「http://www.facebook.com/」を編集不可にしたいのですが、残りの URL は編集できるようにしてください。

以下のスニペットのようなものが最も簡単な方法です。以下の 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;    
}
<table>
    <tr>
        <td>Facebook:</td>
        <td>
            <div class="fakey">http://www.facebook.com/<input  type="text" name="facebook" value="$facebook" /></div>
        </td>
    </tr>        
</table>

于 2012-10-14T00:54:30.443 に答える
2

JavaScript を使用して、プレフィックスを強制的に入力したままにすることができます。

 $('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>

于 2012-10-14T01:21:48.020 に答える
0

これがあなたが探しているものかどうかはわかりませんが、私ができる最善のことです。

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

これがJSFiddleです。

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

于 2012-10-14T02:58:29.530 に答える
0

これを行うには 2 つの方法があります。1つは、属性disabled="disabled"を追加するか、追加readonlyすることです。

どちらも異なる働きをします。必要なのはdisabled="disabled"属性かもしれません。

編集

フィドルが更新されました。次の jQuery コードを含める必要があります。

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

キーボード イベントも使用できます。私は jQuery の初心者なので、この基本的なコードを使用します。:) また、inputタグを次のように更新します。

<input id="inpt" style="width:300px" type="text" name="facebook" value="Any VALUE YOU WANT">
于 2012-10-14T00:50:14.883 に答える
0

このようにしてみてください

<tr>
    <td>
        Facebook:
    </td>
    <td>
        <input style="width:300px" disabled="disabled" type="text" name="facebook" value="http://www.facebook.com/$facebook" />
    </td>
</tr>
于 2012-10-14T00:50:58.710 に答える