jQuery为每个输入更改匹配元素的文本

时间：2017-09-08 13:30:47

标签： javascript jquery forms input

我正在制作可打印的ICE卡。用户在表单输入中输入信息，并在下面显示预览。

我的代码工作正常，但我必须为每个输入/元素匹配复制/粘贴它。我想压缩代码，以便它监听每个输入的更改并更改匹配元素的文本。

下面的代码段。 JSFiddle是here 

$("#inputName").keyup(function() {
  $("#spanName").html($(this).val());
});

$("#inputHCN").keyup(function() {
  $("#spanHCN").html($(this).val());
});

$("#inputDOB").keyup(function() {
  $("#spanDOB").html($(this).val());
});
* {
  margin: 0;
  outline: 0;
  box-sizing: border-box;
  font-family: 'Segoe UI', 'Open Sans', 'Roboto', sans-serif;
}

div {
  background: #fff;
  height: 54mm;
  width: 100mm;
  border-width: 2px;
  border-style: dashed;
  border-radius: 2.88mm;
  padding: 10px;
  margin: 0 auto;
  position: relative;
}

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

li {
  color: blue;
}

span[id*="span"] {
  color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
  <p>
    <input type="text" name="inputName" class="form-control" id="inputName" placeholder="Name">
  </p>
  <p>
    <input type="text" name="inputHCN" class="form-control" id="inputHCN" placeholder="Health Card #">
  </p>
  <p>
    <input type="text" name="inputDOB" class="form-control" id="inputDOB" placeholder="D.O.B.">
  </p>
  etc...
</form>
<br />
<h4>
  Preview of your printable card
</h4>
<br />
<div>
  <ul>
    <li>Name: <span id="spanName"></span></li>
    <li>Health Card #: <span id="spanHCN"></span></li>
    <li>D.O.B.: <span id="spanDOB"></span></li>
    <li>etc...</li>
  </ul>
</div>

7 个答案:

答案 0 :(得分：3)

数据属性是我的方式

$("[data-out]").keyup(function() {
  var selector = $(this).data("out");
  $(selector).text($(this).val());
});
* {
  margin: 0;
  outline: 0;
  box-sizing: border-box;
  font-family: 'Segoe UI', 'Open Sans', 'Roboto', sans-serif;
}

div {
  background: #fff;
  height: 54mm;
  width: 100mm;
  border-width: 2px;
  border-style: dashed;
  border-radius: 2.88mm;
  padding: 10px;
  margin: 0 auto;
  position: relative;
}

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

li {
  color: blue;
}

span[id*="span"] {
  color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
  <p>
    <input type="text" name="inputName" class="form-control" id="inputName" placeholder="Name" data-out="#spanName">
  </p>
  <p>
    <input type="text" name="inputHCN" class="form-control" id="inputHCN" placeholder="Health Card #" data-out="#spanHCN">
  </p>
  <p>
    <input type="text" name="inputDOB" class="form-control" id="inputDOB" placeholder="D.O.B." data-out="#spanDOB">
  </p>
  etc...
</form>
<br />
<h4>
  Preview of your printable card
</h4>
<br />
<div>
  <ul>
    <li>Name: <span id="spanName"></span></li>
    <li>Health Card #: <span id="spanHCN"></span></li>
    <li>D.O.B.: <span id="spanDOB"></span></li>
    <li>etc...</li>
  </ul>
</div>

答案 1 :(得分：3)

将data-target属性添加到表单元素，其中包含应显示文本的元素ID：

<input type="text" name="inputName" data-target="#spanName" class="form-control" id="inputName" placeholder="Name">

现在更改脚本以显示文本。请注意，我使用了两个事件keyup和change，因此复制粘贴也可以。

$(".form-control").on('keyup change', function(e) {
  var target = $(this).data("target");
  $(target).html($(this).val());
});

演示如下： 

$(".form-control").on('keyup change', function(e) {
  var target = $(this).data("target");
  $(target).html($(this).val());
});
* {
  margin: 0;
  outline: 0;
  box-sizing: border-box;
  font-family: 'Segoe UI', 'Open Sans', 'Roboto', sans-serif;
}

div {
  background: #fff;
  height: 54mm;
  width: 100mm;
  border-width: 2px;
  border-style: dashed;
  border-radius: 2.88mm;
  padding: 10px;
  margin: 0 auto;
  position: relative;
}

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

li {
  color: blue;
}

span[id*="span"] {
  color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
  <p>
    <input type="text" name="inputName" data-target="#spanName" class="form-control" id="inputName" placeholder="Name">
  </p>
  <p>
    <input type="text" name="inputHCN" data-target="#spanHCN" class="form-control" id="inputHCN" placeholder="Health Card #">
  </p>
  <p>
    <input type="text" name="inputDOB" data-target="#spanDOB" class="form-control" id="inputDOB" placeholder="D.O.B.">
  </p>
  etc...
</form>
<br />
<h4>
  Preview of your printable card
</h4>
<br />
<div>
  <ul>
    <li>Name: <span id="spanName"></span></li>
    <li>Health Card #: <span id="spanHCN"></span></li>
    <li>D.O.B.: <span id="spanDOB"></span></li>
    <li>etc...</li>
  </ul>
</div>

答案 2 :(得分：2)

可能有很多变体，这里有一个简短的变体，它依赖于输入id属性和span id属性之间的命名约定：

＆＃13;
＆＃13; 
$("#inputName,#inputHCN,#inputDOB").keyup(function() {
  $("#span" + this.id.replace('input', '')).html($(this).val());
});
＆＃13; 
* {
  margin: 0;
  outline: 0;
  box-sizing: border-box;
  font-family: 'Segoe UI', 'Open Sans', 'Roboto', sans-serif;
}

div {
  background: #fff;
  height: 54mm;
  width: 100mm;
  border-width: 2px;
  border-style: dashed;
  border-radius: 2.88mm;
  padding: 10px;
  margin: 0 auto;
  position: relative;
}

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

li {
  color: blue;
}

span[id*="span"] {
  color: red;
}
＆＃13; 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
  <p>
    <input type="text" name="inputName" class="form-control" id="inputName" placeholder="Name">
  </p>
  <p>
    <input type="text" name="inputHCN" class="form-control" id="inputHCN" placeholder="Health Card #">
  </p>
  <p>
    <input type="text" name="inputDOB" class="form-control" id="inputDOB" placeholder="D.O.B.">
  </p>
  etc...
</form>
<br />
<h4>
  Preview of your printable card
</h4>
<br />
<div>
  <ul>
    <li>Name: <span id="spanName"></span></li>
    <li>Health Card #: <span id="spanHCN"></span></li>
    <li>D.O.B.: <span id="spanDOB"></span></li>
    <li>etc...</li>
  </ul>
</div>
＆＃13;
＆＃13;
＆＃13;

答案 3 :(得分：1)

另一种方法是假设遵循命名约定，将input替换为span。

 $("#inputName, #inputHCN, #inputDOB").keyup(function() {
     var spanId = $(this).attr("id").replace("input", "span");
     $("#" + spanId).html($(this).val());
 });

答案 4 :(得分：1)

你可以试试这个。希望它会有所帮助。只需更改文本框的名称，然后使用文本框名称查找范围控件。

$("#inputName,#inputHCN,#inputDOB").keyup(function() {
        var inputValue = $(this).attr("name");
        $("#span" + inputValue).html($(this).val());
  });
* {
  margin: 0;
  outline: 0;
  box-sizing: border-box;
  font-family: 'Segoe UI', 'Open Sans', 'Roboto', sans-serif;
}

div {
  background: #fff;
  height: 54mm;
  width: 100mm;
  border-width: 2px;
  border-style: dashed;
  border-radius: 2.88mm;
  padding: 10px;
  margin: 0 auto;
  position: relative;
}

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

li {
  color: blue;
}

span[id*="span"] {
  color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
  <p>
    <input type="text" name="Name" class="form-control" id="inputName" placeholder="Name">
  </p>
  <p>
    <input type="text" name="HCN" class="form-control" id="inputHCN" placeholder="Health Card #">
  </p>
  <p>
    <input type="text" name="DOB" class="form-control" id="inputDOB" placeholder="D.O.B.">
  </p>
  etc...
</form>
<br />
<h4>
  Preview of your printable card
</h4>
<br />
<div>
  <ul>
    <li>Name: <span id="spanName"></span></li>
    <li>Health Card #: <span id="spanHCN"></span></li>
    <li>D.O.B.: <span id="spanDOB"></span></li>
    <li>etc...</li>
  </ul>
</div>

答案 5 :(得分：0)

您可以遍历输入并为每个输入添加事件侦听器：

var inputs = $('form p input');

for (var i=0; i<inputs.length; i++) {
  $(inputs[i]).keyup(function() {
    var span = $(this).attr('id').replace('input','span');
    $("#"+span).html($(this).val());
  });
}
* {
  margin: 0;
  outline: 0;
  box-sizing: border-box;
  font-family: 'Segoe UI', 'Open Sans', 'Roboto', sans-serif;
}

div {
  background: #fff;
  height: 54mm;
  width: 100mm;
  border-width: 2px;
  border-style: dashed;
  border-radius: 2.88mm;
  padding: 10px;
  margin: 0 auto;
  position: relative;
}

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

li {
  color: blue;
}

span[id*="span"] {
  color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
  <p>
    <input type="text" name="inputName" class="form-control" id="inputName" placeholder="Name">
  </p>
  <p>
    <input type="text" name="inputHCN" class="form-control" id="inputHCN" placeholder="Health Card #">
  </p>
  <p>
    <input type="text" name="inputDOB" class="form-control" id="inputDOB" placeholder="D.O.B.">
  </p>
  etc...
</form>
<br />
<h4>
  Preview of your printable card
</h4>
<br />
<div>
  <ul>
    <li>Name: <span id="spanName"></span></li>
    <li>Health Card #: <span id="spanHCN"></span></li>
    <li>D.O.B.: <span id="spanDOB"></span></li>
    <li>etc...</li>
  </ul>
</div>

答案 6 :(得分：0)

//map the names of the input elements with the output elements
var myIOMap={
    inputName:"spanName",
    inputHCN:"spanHCN",
    inputDOB:"spanDOB",
};

function doTextBinding(ioMap){
    Object.keys(ioMap).forEach(function(inputName,outputName){
        var inputElement="#"+inputName;
        var outputElement="#"+ioMap[inputName];
        console.log(inputElement);
        console.log(outputElement);
        $(inputElement).keyup(function() {
            $(outputElement).html($(this).val());
        });
    });

}
doTextBinding(myIOMap);

使用以下代码替换您的JavaScript，它将执行相同操作，而无需重写每个元素的键盘绑定。确保每次页面初始化时都调用该函数。

相关问题
最新问题