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/ ”不可编辑，但能够编辑网址的其余部分？

类似下面的代码片段将是最简单的方法。对下面 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

有两种方法可以做到这一点。一种是将属性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 回答
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

一种非常简单的方法是使用“输入”HTML 标记中的readonly属性。

disabled是另一个可以使用的属性。

参考资料： https ://www.w3schools.com/tags/tag_input.asp

于 2017-02-19T23:04:31.727 回答
0

你可以试试这个。

<tr>
    <td>
        Facebook:
    </td>
    <td>
        <input style="width:300px" type="text" name="facebook" value="http://www.facebook.com/$facebook" readonly>
    </td>
</tr>
于 2017-04-21T03:22:44.050 回答