如何修复文本框中的值答案

【问题标题】：How to fix a value in a text box如何修复文本框中的值
【发布时间】：2018-05-04 15:37:07
【问题描述】：

我正在尝试在输入框中设置一个固定值，即变量“name-val”。这是我的代码：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<tr>
    <td>
        <input style="width:300px" type="text" class="fixed-value"  value="name-val">
    </td>
</tr>

还有我的脚本：

$('input.fixed-value').keyup(function(){
     if (($(this).val().length > 0) && ($(this).val() == 'name-val')){
            $(this).val('name-val');    
        }
 });

如何使用 javascript 以使名称-值始终显示在文本字段中，并且不可编辑？

**更新：我需要用户能够在 name-val 旁边的文本框中输入，所以我不能将其禁用或只读。并且占位符不起作用，因为我需要该值保持不变，并且还能够更改，但仍保留在输入文本框中。

【问题讨论】：

给输入元素添加readonly属性？
你也可以使用data-attribute或placeholder
您不能简单地禁用它或将其标记为只读吗？
所以用户可以输入除name-val 以外的任何内容，但如果输入为空，则值应该是name-val，对吧？
您想在值的开头保留文本“name-val”，但仍然可以在输入中输入更多文本..？ IE。 name-val 就像是任何值的前缀？

标签： javascript jquery forms input

【解决方案1】：

尝试将您的输入设为只读

<tr>
    <td>
        <input style="width:300px" type="text" class="fixed-value"  value="name-val" readonly>
    </td>
</tr>

$('input.fixed-value').keyup(function() {

  if ($('#txtfld').val().indexOf("name-val") == -1) {

    $('#txtfld').val("name-val" + $(this).val())


  }



});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<tr>
  <td>
    <input style="width:300px" type="text" id="txtfld" class="fixed-value">

  </td>
</tr>

【讨论】：

好的，这与@Teemu 已经评论的内容有何不同？
我需要用户能够在“name-val”旁边的文本框中输入
@MilanChheda 他提供了一个答案，这很好。即使通过评论提出了相同的解决方案。
@KatherineMichelle 你的意思是你需要将用户输入结合到 name-val ？
@KatherineMichelle 我根据您的评论添加了一个新代码 sn-p 试试吧

【解决方案2】：

<input id="name-val" style="width:300px" type="text" class="fixed-value" value="something">

jQuery:

 $(document).ready(function() {
        $("#name-val").val('name-val');
        $("#name-val").on('change', function() {
            var tval = $(this).val();
            $(this).val('name-val' + tval.substring(24));
        });
    });

这应该会更新用户在框中输入的任何内容，但它位于 name-val 后面

【讨论】：

我需要用户能够在“name-val”旁边的文本框中输入

【解决方案3】：

您是否期待这样的事情：

$(document).ready(function () {
  $("#inp").val('name-val')
  .on('change blur focus input', function () {
    var val = $(this).val();
    if (val.indexOf("name-val") !== 0)
      $(this).val('name-val' + val);
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="inp" />

【讨论】：

在值设置为name-val 后更改文本时，您会得到奇怪的结果。从文本框中删除l，你会得到name-valname-va。
@Abbas 是的，我知道这一点。 :(

【解决方案4】：

一种简单的方法可以手动组合 2 个输入并使其看起来像 1，然后使用 jQuery 获取值或根据需要连接它们：

$('input.fixed-value').keyup(function(){
    var val = $("input.input1").val()
    var current = $(this).val();    
    var result = val + current
    $("span").html(result)
});

.input1{
    border-right: none;
}
.input2{
    border-left: none;
    margin-left: -4px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<input style="width:60px" type="text" class="fixed-value input1"  value="name-val " readonly>
 <input style="width:300px" type="text" class="fixed-value input2"  placeholder="Write something">
 
<br><br>
<span></span>

【讨论】：

【解决方案5】：

其他解决方案可能会奏效，但基于这些事实，这是另一种解决方案：

name-val 必须保持不变
用户可以输入自己的文字

在我看来，以保持恒定值加上一些用户插入值的方式对其进行操作是不好的设计和实践。

我建议你创建类似Bootstrap add-on 的东西。

<label for="myInput">Type a value:</label>
<div class="input-group">
    <span class="input-group-addon">name-val</span>
    <input type="text" id="myInput" class="form-control">
</div>

而当你想使用“最终”值时，可以将用户输入添加到name-val：

$const = "name-val";
$("#myInput").keyup(function() {
  $userValue = $(this).val();
  $resultValue = $const + $userValue;
  $("#result").val($resultValue);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<label for="myInput">Type a value:</label>
<div class="input-group">
  <span class="input-group-addon">name-val</span>
  <input type="text" id="myInput" class="form-control">
</div>
<input type="text" class="form-control" id="result" />

【讨论】：