I’m having a very odd issue with an input type text field… it won’t accept “space” keystrokes. For example, if I want to write John Smith, the input only would allow JohnSmith (no spaces). There are a couple of particularities about this field. It is dynamically created, and it has been embedded inside a SumoSelect (jQuery Dropdown Plugin) dropdown list. The idea is that if I need to enter a new option that’s is not available, I can enter it in the input field, and it is added to the dropdown list.
Adding option JS code:
$('#aip').SumoSelect();
$('.aipPanel .options').append('<li class="opt" id="addAIP" style="padding-right: 0;width: 94%;"><input placeholder="Add new AIP" style="width:75%;" id="addNewAIPInput" onkeypress="myFunction(event)" type="text"/><a class="btn btn-large" href="#" style="background:#699;line-height:30px;padding:.3em;width:20%;margin-left:0.8em;height:28px;color:#fff;font-weight:700;border-radius: 4px;" id="addNewAIPBtn"><i class="fas fa-plus-square"></i></a></li>');
$("#addNewAIPBtn").click(function() {
var inputValue = $('#addNewAIPInput').val();
if (inputValue !== '') {
$('#aip')[0].sumo.add(inputValue);
$('#aip')[0].sumo.reload();
$('#aip')[0].sumo.selectItem(inputValue);
}
});
I added an onkeypress function just for testing. It recognizes all keystrokes except... "space":
function myFunction(event) {
var x = event.which || event.keyCode;
console.log("The Unicode value is: " + x);// It works just fine!!!
if(event.which === 32){
console.log('space entered'); // Nothing happens here!!!
event.target.value = event.target.value + ' ';// just for testing
}
}
Everything else works just fine. The new option is added to the dropdown list. I can enter any letter on the input box, but not "spaces".
Any ideas what could be happening here?