Question

我试图在输入框中设置一个固定值，这将是变量＆＃34; name-val＆＃34;。这是我的代码：

<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旁边的文本框，因此我无法将其禁用或只读。和占位符不起作用，因为我需要保持这个值，并且能够更改，但保留在输入文本框中。

Answer 1

尝试将您的输入设为只读

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

＆＃13;

$('input.fixed-value').keyup(function() {

  if ($('#txtfld').val().indexOf("name-val") == -1) {

    $('#txtfld').val("name-val" + $(this).val())


  }



});

＆＃13;

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

＆＃13;

Answer 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

后面

Answer 3

你期待这样的事情：

＆＃13;

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

＆＃13;

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

＆＃13;

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

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

当你想使用＆＃34; final＆＃34;值，您可以将用户输入添加到name-val：

＆＃13;

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

＆＃13;

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

＆＃13;

如何修复文本框中的值

5 个答案: