如何顯示通過輸入文本新添加的跨度值

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，它不起作用。

編輯

在按鍵事件中，我嘗試使用answer（trincot）中建議的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

像focusout處理程序一樣使用this.value ：

if (/(188|13)/.test(this.value)) $(this).focusout();

您可能想改進該正則表達式。 如果要在用戶輸入逗號，分號，連字符或空格后立即添加標簽，則：

if (/([,;- ])/.test(this.value)) $(this).focusout();

您可以根據自己的喜好擴展字符列表。

要響應回車鍵（不改變值），可以對keyCode進行測試：

if (e.keyCode == 13 || /([,;\- ])/.test(this.value)) $(this).focusout();

Answer 2

您可以使用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;
                }
            });

希望這會幫助你。