javascript - 自动输入输入字段 - 将数据存储在 div 中（计数，转储值 - 发送到数据库）

Question

我一直在写一个小函数，它有一个输入框文本（只允许 24 个数字），在输入 24 个数字后，值将被存储到<div><span>value from input</span></div>

我想稍后使用 jQuery 来制作一些淡入效果。

我的问题是如何重新创建当前脚本以将数据存储在 a 中而不是每次都span创建一个新脚本？input

示例 jsFiddle

你能告诉我如何计算这些值以及如何对它们进行 var_dump 吗？因为以后我不想进行数据库查询。

Answer 1

The HTML:

<form>
    <span class="input-component"><input type="text"/><a href=#></a></span>
 </form>
<br><br>
<div id="numcontainer">
    <br>
</div>

The Javascript:

$('form .input-component input').on("propertychange keyup input paste", addInput);

function addInput() {
  var remainingChars = $(this).val().length;
  if (remainingChars == 24) {

    var $newNumSpan = $('<span class="containernum">');
    $newNumSpan.text( $(this).val() );

    $('#numcontainer').append($newNumSpan); // <span class="containernum">1234...</span>
    $('#numcontainer').append('<a class="js-delete" href="#">[X]</a>');
    $('#numcontainer').append('<br>');

    $(this).val(''); // does empty the text input

    values.push($(this).val());
    console.log(values);
  }
}

And you should also attach this handler to the #numcontainer DOM node in order to delete a "number entry" when clicking an associated [X] link:

jQuery(function($) {

    var values = [];

    $('#numcontainer').on('click', 'a.js-delete', function(e) {
      $(this).prev().remove(); // the <span>
      $(this).next().remove(); // the <br>
      $(this).remove(); // the <a> itself
    });
    // ...

Answer 2

这应该适用于在跨度中存储 24 个字符。

$('.fieldclass').on('keyup', function(){
    if ($(this).val().length == 24) {
        $('span').text($(this).val()); // Update span to the value.
    }
});

或者，如果您想在用户每次按下键时更新跨度。

$('.fieldclass').on('keyup', function(){
    $('span').text($(this).val()); // Update span to the value.
});