Предотвращение удаления специального символа в текстовом поле

Question

Я хочу, чтобы пользователь не удалял символ «/» в текстовом поле при нажатии backspace или canc.

Например:

Если значение текстового поля является 2014/09/, и пользователь нажимает клавишу Backspace, то символ «/» не будет удален.

Как это сделать в методах keyup или keydown?

$("#textboxId").keyup(function(){ 

    // any idea 

}); 

Answer 1

У вас есть три ситуации:

1. The прессы пользователя backspace и удаляет символ перед курсором
2. Пользователь нажимает canc и удаляет символ после курсора
3. Пользователь выбирает текст и нажимает backspace или canc и удаляет выделенный текст

Таким образом, вы должны обойти все эти разные ситуации.

Этот код будет работать:

$('#textareaId')[0].addEventListener("keydown", function(e) { 
    var start = this.selectionStart, 
     end = this.selectionEnd, 
     value = this.value, 
     key = e.keyCode; 

    if (key == 8 && value[start-1] == '/') e.preventDefault(); 
    if (key == 46 && value[start] == '/') e.preventDefault(); 
    if ((key == 8 || key == 46) && value.substring(start, end).indexOf('/') != -1) e.preventDefault(); 

}, false); 

РАБОЧИЙ ПРИМЕР: http://jsfiddle.net/MeBeiM/7hdb3472/1

Answer 2

Я сделал это с помощью строковых операций

Проверьте мою скрипку здесь http://jsfiddle.net/7ek11cfs/21/

$('textarea').keydown(function(e) { 
    textValue = $(this).val(); 
}); 

$('textarea').keyup(function(e) { 
if(textValue.charAt(textValue.length-1)=='/') 
{ 
    $('textarea').val(textValue); 
} 
}); 

Надеется, что это помогает

Answer 3

здесь вы идете =>DEMO

(function ($, undefined) { 
    $.fn.getCursorPosition = function() { 
     var el = $(this).get(0); 
     var pos = 0; 
     if('selectionStart' in el) { 
      pos = el.selectionStart; 
     } else if('selection' in document) { 
      el.focus(); 
      var Sel = document.selection.createRange(); 
      var SelLength = document.selection.createRange().text.length; 
      Sel.moveStart('character', -el.value.length); 
      pos = Sel.text.length - SelLength; 
     } 
     return pos; 
    } 
})(jQuery); 

$("#textboxId").keydown(function(e){ 
    var currentPos=$(this).getCursorPosition(); 
    var lastChar=$(this).val().substr((currentPos- $(this).val().length)- 1); 
    if(e.which==8 && lastChar.match(/^\//g)){ 
     e.preventDefault(); 
     return false; 
    } 
}); 

Я взял немного помощи от THIS ANSWER для определения текущей позиции курсора.

УКАЗЫВАЙТЕ, что в противостоянии ко всем остальным ответам и идеям это будет ФАКТИЧЕСКИ работать как маска и не будет удаляться, даже если курсор находится посредине текста!