jQuery delete the last character typed in an input

Asked

Viewed 7,010 times

1

I would like to know how to delete only the last letter typed in an input field.

All the examples I found are cleaning the whole field val.

javascript jquery

  • When? By clicking a button? By leaving the field?

  • by clicking a button created for this purpose, clicking calls the function that should perform this.

  • Read about the method substr javascript

  • I guess since you want to control what’s typed, you can use regex (http://regexr.com/) to limit what can be informed by the user

4 answers

5

You can use the slice() or the substring() to create a new string from the first character to the penultimate character and then make this new string is the new value of input.

About the methods:

The slice() extracts a piece of a string and returns a new one. The first parameter is the starting position of "extract" and the second parameter is the final position. Use -1 is equivalent to the last position, and so on. See more in the documentation.

The substring works in a similar way, with few differences, one of them is that it is not possible to use negative indexes. See more in the documentation.

Example:

$('#excluir').on('click', function (){
  var input = $('#txt');
  input.val(input.val().slice(0, -1));
});

$('#excluir2').on('click', function (){
  var input = $('#txt');
  var texto = input.val();
  input.val(texto.substring(0, texto.length - 1));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="txt" type="text" value="Isso é um teste!" />
<button id="excluir">← &nbsp;&nbsp;&nbsp;</button>
<button id="excluir2">← &nbsp;&nbsp;&nbsp;</button>

5


takes the input value, removes the last character and updates the input.

var texto = $("#input_id").val();
$("#input_id").val(texto.substring(0, texto.length - 1));

  • This was the one that suited best, but in case I wanted to change the click function, to onkeydown in the input, no longer works correctly, it deletes the antepenultimate and the last keeps appearing, also it deletes only the first time.

  • @sabrinabgbc, to leave on onkeydown possibly you already know the maximum character size of the field, so you can limit it with the maxlength

  • 1

    @sabrinabgbc Please don’t change the focus of your question. If you need other help, open a new question. That way things don’t get confusing.

1

With the click of the button you will capture the input value and remove the last character. After that you will set the new value for the input.

 $("#idBotao").click(function(){
        var input_novo_valor = $("#idInput").text().slice(0,-1); 
        $("#idInput").val(input_novo_valor);
    });

1

I like REGEX so I will provide an answer with the same though the one from @jbueno already perfectly resolve the issue.

$('#excluir').on('click', function (){
  var input = $('#txt')[0];
  input.value = input.value.replace(/.$/, '');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="txt" type="text" value="Isso é um teste!" />
<button id="excluir">← &nbsp;&nbsp;&nbsp;</button>

Explanation

  • Pattern : .$ - search for the last character
  • Replace : - replaces it with "nothing".

Browser other questions tagged javascript jquery

You are not signed in. Login or sign up in order to post.