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

Question

Am trying to pass span value to a function, but couldn't get value from the span that is being received via input text field.

Below is my code:

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>

Using above jquery functions, I can enter value in input text and it gets stored as span element. I want to pass the value of the which is being entered on 'enter key' or ',' . How can I do it?

I tried using $(this).innerHTML in keyup event, it doesn't work.

EDIT

In key up event I tried to call a method with the span value as suggested in the answer(trincot) like below:

   .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);
        }

The problem with this is, as soon as I keyin the input text, alert gets.. how can I get the alert with the span value only after pressing either 'Enter' or ',' ?

Answer 1

Use this.value like you already do for the focusout handler:

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

You maybe want to improve on that regular expression. If you want to add tags as soon as the user enters a comma, semi-colon, hyphen or space then:

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

You can extend the list of characters according to your preference.

To respond to the enter key (which does not change the value), you could extend with a test on the keyCode :

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

Answer 2

You can use keydown event instead of keyup like following.

$('#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;
                }
            });

Hope this will help you.