Add / remove keywords in textarea doesn't work on cell phones (jquery)

Question

Works fine on a computer. On a computer after you enter a word and press the space bar the word gets wrapped in a box and you get the option to remove it. On a cell phone nothing happens after your press the space bar. It also doesn't limit it to 5 words on a cell phone.

Working jsfiddle: http://jsfiddle.net/1hco43vr/

  $('#box a').on('click', function() {
    $(this).parent().parent().remove();
    console.log('remove disabled');
    if ($('#box ul li').length <= 5) {
      $('#type').prop('disabled', false);
    }
  });
}
$('#type').keypress(function(e) {
  if (e.which == 32) { //change to 32 for spacebar instead of enter
    var tx = $(this).val();
    if ($('#box ul li').length > 5) {
      $(this).val('');
      console.log('add disabled');
      $('#type').prop('disabled', 'disabled');
    } else {
      if (tx) {
        $(this).val('').parent().before('<li><span>' + tx + '<a href="javascript:void(0);">x</a></span></li>');
        closer();
      }
    }
  }
});

Because of the issue [*keyCode on android is always 229*](https://stackoverflow.com/questions/36753548/keycode-on-android-is-always-229) — User863, Dec 11 '20 at 13:47
When I add 229 to the code it doesn't do anything with `keypress` on a cell phone: `$('#type').keypress(function(e) { if (e.which == 32 || e.which == 229)` however when I change it to `keyup` `$('#type').keyup(function(e) { if (e.which == 32 || e.which == 229)` it works fine on computers but on cell phones every button triggers the function, not just the space bar. Why is it so? — Vitali Kloster, Dec 11 '20 at 15:03
Also `https://unixpapa.com/js/testkey.html` says all keys on my Samsung cell phone produce `keyCode 229`. I don't get it. Any help will be appreciated. — Vitali Kloster, Dec 11 '20 at 21:03

sbgib · Accepted Answer · 2020-12-16T11:47:14.683

Instead of using .keypress(), which listens for the keypress JavaScript event (now deprecated), it is preferable to use the input event instead. This is both currently supported and not dependent on a specific input method (it also works if the user pastes the data instead of keying it in, for example). This means that it has a much better chance of behaving consistently across different types of devices.

Each time the user inputs text in the input field, check whether the user has entered a space, before doing something useful: http://jsfiddle.net/7vdtz5jm/2/

function closer() {
  $('#box a').on('click', function() {
    $(this).parent().parent().remove();
    console.log('remove disabled');
    if ($('#box ul li').length <= 5) {
      $('#type').prop('disabled', false);
    }
  });
}

$('#type').on('input', function(e) {
  var tx = $(this).val();
  var array = tx.split(' ');
  var limit = 5;
  var remainder = '';
  
  if (1 < array.length) { //change to 32 for spacebar instead of enter
    if ($('#box ul li').length > limit) {
      $(this).val('');
      console.log('add disabled');
      $('#type').prop('disabled', 'disabled');
    } else {
      $.each(array, function(i, text) {
        if(i < limit && i === array.length - 1 && text) { //no space at the end
           remainder = text;
           return false;
        } else if($('#box ul li').length <= limit) {
          if (text) {
            $('#type').parent().before('<li><span>' + text + '<a href="javascript:void(0);">x</a></span></li>');
            closer();
          };
        } else {
          $('#type').val('');
          console.log('add disabled');
          $('#type').prop('disabled', 'disabled');
          remainder = '';
          return false;
        };
      })
      
      $('#type').val(remainder);
    }
  }
});

#box{padding:8px 2px;border:1px solid #CCCCCC;display:block}
#box input,#box input:active,#box input:focus{border:none;background:none;outline:none}
#box ul,#box li,#box input{margin:0;padding:0}
#box ul,#box li{list-style:none}
#box li,#box a{display:inline-block;margin:2px}
#box span{background-color:#EDEDED;padding:3px;color:#666666;border:1px solid #CCCCCC}
#box a{font-size:12px;line-height:12px;color:#666666;text-decoration:none;padding:1px 3px;margin-left:5px;font-weight:bold;background-color:#FFFFFF;vertical-align:top;border:1px solid #CCCCCC;margin-top:-1px}
#box a:hover{background-color:#666666;color:#FFFFFF}

/* why not? */
body{font-family:sans-serif}
#box span{border-radius:5px}
#box a{border-radius:100%;overflow:hidden}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<div id="box">
    <ul>
        <li><input type="text" id="type"/></li>
    </ul>
</div>
<small>*put something in the input above, and press enter.</small>

this will not work `tx[tx.length - 1] === " "` if you move the cursor and enter text in different place. You need to compare previous text with new one, with input even that's the only way to get new content that was added. Maybe also checking cursor position as well. — jcubic, Dec 16 '20 at 10:37
@jcubic good point, thank you. Depending on the requirements, it may not be necessary to find exactly what text was entered last. I would assume that each space should be handled, regardless of when/where it was entered. I've updated this answer so that it works if the space is entered before the end and if more than one is entered at the same time. — sbgib, Dec 16 '20 at 11:47
Thank you. Seems to be working fine now. Really appreciate it. — Vitali Kloster, Dec 16 '20 at 12:21

Add / remove keywords in textarea doesn't work on cell phones (jquery)

1 Answers1