Html 如何修复文本框中的值？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12878353/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to fix a value in a textbox?
提问by Lucas Matos
I have a textbox to save the user facebook's url.
我有一个文本框来保存用户 facebook 的 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?
如何使值“ http://www.facebook.com/”固定且不可编辑？
UPDATE:
更新：
the $facebookpart needs to be editable!!
该$facebook部分需要可编辑！！
采纳答案by hjpotter92
There are two methods to do this. One is to add the attribute disabled="disabled"to it, or add readonlyto it.
有两种方法可以做到这一点。一种是给它添加属性disabled="disabled"，或者添加readonly到它。
Both work differently. What you need might be disabled="disabled"attribute.
两者的工作方式不同。你需要的可能是disabled="disabled"属性。
EDIT
编辑
fiddleupdated. You should include following jQuery code:
小提琴更新。您应该包含以下 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));
});
});
You may use keyboard events too, I am myself a beginner in jQuery, hence this basic piece of code. :) Also, update the inputtag to this:
您也可以使用键盘事件，我自己是 jQuery 的初学者，因此是这段基本代码。:) 另外，将input标签更新为：
<input id="inpt" style="width:300px" type="text" name="facebook" value="Any VALUE YOU WANT">
回答by ultranaut
I think you are asking to have "http://www.facebook.com/" uneditable, but be able to edit the remainder of the url?
我认为您要求“ http://www.facebook.com/”不可编辑，但能够编辑网址的其余部分？
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.
类似于下面的代码片段将是最简单的方法。像下面的 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>回答by DDA
You can use javascript to force the prefix to remain entered at all cost.
您可以使用 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>回答by Bruno Calza
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:
这是 JSFiddle：
回答by Carlos Rafael
A very simple way is to use the readonlyattributein the "input" HTML tag.
一个非常简单的方法是使用“input”HTML 标签中的readonly属性。
disabledis another property that can be usable.
disabled是另一个可以使用的属性。
References: https://www.w3schools.com/tags/tag_input.asp
回答by Anis
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>
回答by webNeat
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>
