Question

我正在尝试为输入文本区域的每个单词创建一个html元素。我到目前为止的代码是：

<table id="sentencetable">
  <tr>
    <th colspan="2">Enter Sentence</th>     <!-- colspan used to add text over multiple columns -->
  </tr>
  <tr>
    <td style="vertical-align:top">
      English :
    </td>
    <td>
      <textarea name="english" required></textarea>             <!-- inputs text areat in table data -->
    </td>
  </tr>
  <tr>
    <td style="vertical-align:top">
      Sanskrit :
    </td>
    <td>
      <textarea id="sanskrit" name="sanskrit" required></textarea>
    </td>
  </tr>

  <tr>
    <table id="add">

    </table>
  </tr>
</table>

<script>
$(document).ready(function(){
    $('#sanskrit').keyup(function(){
        var sanskrit = this.value.trim();                     
        var x = sanskrit.split(' ');
        for(var i = 0; i < x.length; i++){
            $('#add').append('<input style="width:70px" placeholder="Enter Root" type="text" name="root'+i+'" required/>')
        }
    });
});
</script>

然而，对于按下的每个键，它会创建一个新的文本字段，我只想为梵文textarea中输入的每个单词创建一个新的文本字段。关于如何做到这一点的任何想法。

Answer 1

$(document).ready(function () {
    $('#sanskrit').keyup(function () {
        $.each(this.value.trim().split(/\s+/), function(i) {
            if ( ! $('[name="root'+i+'"]').length ) {

                var inp = $('<input />', {
                    css         : "width:70px",
                    placeholder : "Enter Root",
                    type        : "text",
                    name        : "root" + i,
                    required    : "required"
                });

                 $('#add').append(inp)
            }
        });
    });
});

FIDDLE

Answer 2

收听空格键：

$('#sanskrit').keyup(function(e){
    if(e.which === 32){
        var sanskrit = this.value.trim(),
            x = sanskrit.split(' '),
            $add = $('#add');

        for(var i = 0; i < x.length; i++){
            if($add.find('input[name="root'+i+'"]').length === 0){
                $add.append('<input style="width:70px" placeholder="Enter Root" type="text" name="root'+i+'" required/>')
            }
        }
    }
});

此类内容仅在您创建新单词时才会执行此功能。

我将其编辑为仅添加新项目（如果它们尚不存在）。

使用jquery append和keyup限制输入类型的数量

2 个答案: