input type="text"に文字を入力後に、enterで操作をするたびに.selected_wrapper
内にタグを追加(5個まで)するコードをJqueryで作成しております。
ここで一つ問題が生じております。
同じタグを受け付けないために、(例えばdogと一度入力してタグを作成したものをまたdogというタグを入力させないために)
$(this).val('');//ここで同一文字列を受け付けない
を加えております。
しかしながら、一方でenterキーを拾うためにはkeypressイベントである必要があったため
上記の例で言えば、dogfoodと言う違う単語のタグを受け付けたい場合でも、fを入力した時点で
$(this).val('');が処理されてしまいます。
enterキーでタグ化処理を実行させつつ、dogもdogfoodも受け付けるような
単純な良いアイデアがあればお知恵を拝借したく思います。
html
1<div class="selected_wrapper"> 2 <div id="input_opt"> 3 <input type="text" id="text_opt" name="" value="" placeholder="カテゴリーから選択または記入" maxlength="15"> 4</div> 5</div>
javascript
1 $('#text_opt').on('keypress',function(e){ 2 var collection=[]; 3 $('.selected_wrapper').children('.opt_select').each(function(num,elem){ 4 var add_elem=$.trim($(elem).text()); 5 collection.push(add_elem); 6 }) 7 var tex= $(this).val().trim(); 8 if($.inArray(tex,collection)<0){ 9 10 var opt_select_num= ($('.selected_wrapper').children('.opt_select')).length; 11 if (opt_select_num<5) { 12 if($(this).val().length>0){ 13 var ts=Math.ceil(e.timeStamp); 14 if (e.which == 13) {//ここが悩みどころです 15 var opt_text=($(this).val()); 16 $('#input_opt').before('<div class="opt_select"><div class="opt_content">'+opt_text.replace(/\s+/g, "")+'</div>'+'<div class="opt_delete" id="opt_'+ts+'"><i class="fa fa-times" aria-hidden="true"></i></div>'+'</div>') 17 $('#hide').append('<input type="hidden" id="del_'+ts+'" name="'+opt_text.replace(/\s+/g, "")+'">') 18 $(this).val(''); 19 $('#text_opt').removeAttr('placeholder'); 20 } 21 }; 22 }else if(opt_select_num>=5){ 23 $(this).val(''); 24 } 25 }else{ 26 $(this).val('');//ここで同一文字列を受け付けない 27 } 28 }) 29 30}) 31
回答2件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2018/07/17 12:28