javascript - 如何显示通过输入文本新添加的跨度值

Question

我正在尝试将跨度值传递给函数，但无法从通过输入文本字段接收的跨度中获取值。

下面是我的代码:

HTML

          <div id="tags" style="border:none">
              <span class="tag" id="4"></span>
                <input type="text" id="inptags" value="" placeholder="Add 5 main categories (enter ,)" />
            </div>            

Javascript

            <script type="text/javascript">
            $(function () {

                $('#tags input').on('focusout', function () {
                    var txt = this.value.replace(/[^a-zA-Z0-9\+\-\.\#]/g, '');
                    if (txt) {
                        $(this).before('<span class="tag">' + txt.toLowerCase() + '</span>');
                    }
                    this.value = "";
                }).on('keyup', function (e) {
                    if (/(188|13)/.test(e.which)) $(this).focusout();

                    if ($('#tags span').length == 5) {
                        alert('Reached Maximum!');
                        document.getElementById('inptags').style.display = 'none';
                    }
                });

                $('#tags').on('click', '.tag', function () {
                    $(this).remove();
                    document.getElementById('inptags').style.display = 'block';
                });
            });

        </script>

使用上面的 jquery 函数，我可以在输入文本中输入值并将其存储为 span 元素。我想传递在 'enter key' 或 ',' 上输入的值。我该怎么做？

我尝试在 keyup 事件中使用 $(this).innerHTML，它不起作用。

编辑

在 key up 事件中，我尝试调用一个带有 span 值的方法，如下所示:

   .on('keyup', function (e) {
            if (/(188|13)/.test(e.which)) $(this).focusout();
            if (/(188|13)/.test(addnewrow(this.value))) $(this).focusout();

 });
        function addnewrow(inputtext) 
        {
            alert('New row is : '+inputtext);
        }

这个问题是，只要我输入输入文本，就会收到警报。.只有在按下“Enter”或“,”后，我怎样才能获得带有跨度值的警报？

Answer 1

您可以使用 keydown 事件代替 keyup ，如下所示。

$('#tags input').on('focusout', function () {
                var txt = this.value.replace(/[^a-zA-Z0-9\+\-\.\#]/g, '');
                if (txt) {
                    $(this).before('<span class="tag">' + txt.toLowerCase() + '</span>');
                }
                this.value = "";
            }).on('keydown', function (e) {
                if(e.which==13 || e.which==188){
                    addnewrow($(this).val());
                    $(this).val('');
                    return;
                }
            });

希望对您有所帮助。