jquery - 如何在按下逗号键后而不是在按下空格键后获取输入字段内的类型词

Question

我有一个输入字段，我希望输入的单词在按下逗号键后出现一次，而不是在按下空格键后出现一次。目前我是在按下空格键之后。 因此，当我只按逗号键时我该怎么做。

希望你理解我的问题。

HTML

<div id="wrapper">
<input type="text" id="txtNames" placeholder="Type name here"/>
</div>

CSS

.tagsDiv
{
background-color:rgb(165, 215, 175);
color:black;
display: inline-block;
padding:5px;
height:30px;
margin:10px;
border-radius:5px;
}

.innerBody{
display:inline-block;
padding: 5px;
}
.close{
margin-left:-5px;
position:absolute;
margin-top:-7px;
text-decoration: none !important;
}
#wrapper{
width:400px;
min-height:200px;
border:black 2px solid;
}
#txtNames{
border:none;
outline:none;
padding:15px;
}

JS

function createTag(vals)
{
var html='<div class="tagsDiv">'
         +'<div class="innerBody">'+vals.trim()+'</div>'
         +'<a href="#" class="close">x</button></div>';
$(html).insertBefore('#txtNames');
$('#txtNames').val('')
}


$("#txtNames").on('keypress',function(e){
if(e.which===32)
{
    if($(this).val().trim()!=='')
    {
    setTimeout(function(){
        createTag($('#txtNames').val());   
    },0);
    }
}
});

$(document).on('click','.close',function(){
$(this).parents('.tagsDiv').remove();
});

Answer 1

空格键的 keyCode 是 32。逗号的 keyCode 是 188。

替换

if(e.which===32)

与

if(e.which===188)

在您的 keypress 处理程序中。

更新

对于防止显示逗号以及允许 enter 键的特定需求，请尝试以下操作:

$("#txtNames").on('keydown', function (e) {
    // Grab the textbox value
    var value = $(this).val();

    // Check for ENTER or COMMA
    if (e.which === 13 || e.which === 188) {
        if(value) {
            createTag(value);   
        }

        // Cancel the event, preventing the ',' from 
        // appearing in the input box
        e.preventDefault();
    }
});