Как удалить символы из текстового поля, если количество символов превышает определенный предел?

Question

Я хотел бы реализовать текстовое поле с ограничением в 140 символов в Javascript, чтобы при добавлении 141-го символа этот символ стирался.

Я не хочу показывать какие-либо сообщения или оповещения пользователю, что они превысили лимит. Счетчик уже есть.

Вот пример того, что я хочу сделать: http://titletweets.com/category/games/michigan-state-vs-north-carolina/

Я использую jQuery, если он уже имеет эту функцию, пожалуйста, дайте мне знать.

Answer 1

Если это однострочное текстовое поле, вы можете использовать атрибут maxlength:

<input type="text" maxlength="140" />

Стоит также отметить, что каким бы ни было ваше решение, вам все равно придется повторить проверку на стороне сервера . Независимо от того, сообщаете ли вы пользователю, что его запись была слишком длинной, или вы просто обрезаете данные, решать только вам.

Answer 2

У банка в Скандинавии недавно был иск, потому что клиент случайно перевел кучу денег на неправильный счет, потому что он ввел слишком много нулей в номер счета. Это сделало полученный номер счета недействительным, однако она не заметила, потому что веб-приложение молча стерло ее лишнюю цифру. Поэтому она вошла во что-то вроде

1223300045

но должен был ввести

122330045

и, следовательно, счет

122330004

получила ее деньги. Это главный недостаток юзабилити.

В случае чего-то вроде текстовой области взгляните на собственный пользовательский интерфейс комментариев StackOverflow. Он показывает вам, сколько текста находится в вашем текстовом поле, и у вас есть возможность редактировать текст, но действительно приятной особенностью является то, что вы можете печатать столько, сколько хотите, а затем редактировать до чистого предела, что дает вам говори все что хочешь. Если ваше текстовое поле стирает текст пользователя:

• Они могут не заметить, что это происходит, если они печатают, глядя на клавиатуру.
• Им нужно стереть текст, прежде чем они смогут добавить новую, более краткую формулировку
• Они будут раздражены

Таким образом, моя рекомендация - позволить пользователю печатать столько, сколько он хочет, но дать ему знать, когда он превысит ограничение, и позволить ему редактировать. Следующий пример поможет вам начать. Вы должны изменить селекторы соответствующим образом, чтобы манипулировать только теми текстовыми / текстовыми вводами, которые вам нужны. И не забывайте делать правильные вещи, если предел неверный. Этот образец устанавливает класс; Атрибут class позволяет изменить цвет текстовой области (или любой другой). Вы можете показать сообщение или что-то. Они позволяют пользователю продолжать печатать.

function checkTALength(event) {
  var text = $(this).val();
  if(text.length > 140) {
    $(this).addClass('overlimit');
  } else {
    $(this).removeClass('overlimit');
  }
}
function checkSubmit(event) {
  if($('.overlimit', this).length > 0) { return false; }
}

$(document).ready(function() {   
  $('textarea').change(checkTALength);
  $('textarea').keyup(checkTALength);
  $('form').submit(checkSubmit);
});   

Answer 3

Предполагая, что id текстовой области - TextArea, что-то вроде этого должно работать.

$("#theTextArea").keyup(function(event) {

    var text = $("#theTextArea").val();
    if (text.length > 140)
        $("#theTextArea").val(text.substring(0, 140));

});

Answer 4

Keyup не помешает операции вставки правой кнопкой мыши, которая может превысить предел - вы можете установить значение onchange или onblur, а также нажатие клавиши.

Если вы обрабатываете событие от нажатия клавиши, до нажатия клавиши вы можете избежать мигания 141-й буквы.

Или, если это элемент ввода текста. установить максимальную длину

Answer 5

с макушки головы:

    $('#myTextArea').keyup(function() {
        var text = $(this).text();
        if(text.length == 141) {
            $(this).text(text.substring(text.length - 2));
        }
    });

Answer 6

Если вы используете textarea, который не имеет встроенного maxlength, вы можете просто назначить keyup событие:

$('#tweet').keyup(function(){
  var s = $(this).text();
  if(s.length > 140)
    $(this).text(s.substring(0,140))
});

Answer 7

Вариация на тему:

$("#textarea").keyup(function(e) {
    var trim = this.value.substr( 0, 140 );  // "foo".substr(0, 140) == "foo"
    if ( this.value != trim ) {
      this.value = trim;
    }
});

Answer 8

$(document).ready(function() {
        var maxLimit = 140;
        $('#txtIdInput').keyup(function() {
        var length = $('#txtIdInput').val().length;
            if (length > maxLimit) {
                $("#txtIdInput").val($("#txtIdInput").val().substring(0, maxLimit));
            }
        });

    });