How to delete last character from a input textbox using JavaScript? I make this small task Its function is that when we write a letter in the input, it checks the index number of the value in the queue. And we will choose them all And we will select everyone in the input except the letter we have written.
HTML Code:
<input id="autocomplet" onkeyup="filter(this.value);">
Javascript Code:
<script>
var data = document.querySelector('#autocomplet');
var myArray = ["c++", "java", "php", "coldfusion", "javascript", "asp", "ruby"];
function filter(letter) {
var results = [];
var len = myArray.length;
for (var i = 0; i < len; i++) {
if (myArray[i].indexOf(letter) == 0){
results.push(myArray[i]);
data.value = results;
getSelectedText(data,letter);
}
}
if((event.keyCode == 46) || (event.keyCode == 8)){
data.value='';
}
}
function getSelectedText(data,letter) {
data = data.value;
var datalength = data.length;
var letterlength = letter.length;
autocomplet.setSelectionRange(letterlength,datalength);
}
</script>
I don't Know If This Helps but here it is.
var data = document.querySelector('#autocomplet');
var myArray = ["c++", "java", "php", "coldfusion", "javascript", "asp", "ruby"];
function filter(letter) {
var results = [];
var len = myArray.length;
if ((event.keyCode == 46) || (event.keyCode == 8)) {
return getSelectedText(data, letter);
// data.value = '';
}
for (var i = 0; i < len; i++) {
if (myArray[i].indexOf(letter) == 0) {
results.push(myArray[i]);
data.value = results;
getSelectedText(data, letter);
}
}
}
function getSelectedText(data, letter) {
data = data.value;
var datalength = data.length;
var letterlength = letter.length;
autocomplet.setSelectionRange(letterlength, datalength);
}You can take the input and put it in a string. Then take the lenght of the input and do a for loop which will run one time less than the number of the lenght. After that get letter by letter to reconstruct the phrase in a new variable.
let phrase = “your_phrase.”;
let x = 0;
let p2=“”;
let n = 0;
while(true)
{
if(phrase == null){break;}
x++
}
x—-; //maybe try to delete this if 1 extra letter deleted.
for(n; n <= x-1;x++)
{
p2 = p2 - phrase[n];
}
Consider the following. This is a jQuery example, yet all the same algorithm should apply to JavaScript.
$(function() {
var myArray = ["c++", "java", "php", "coldfusion", "javascript", "asp", "ruby"];
function checkEntry(event) {
console.log(event.keyCode);
if (event.keyCode == 8) {
resetVal(event.target);
}
filter($(event.target).val(), event.target);
}
function resetVal(target) {
var val = $(target).val();
var sel = window.getSelection().toString();
window.getSelection().empty();
console.log("Reset", val, sel);
$(target).val(val.slice(0, val.length - 1));
}
function filter(term, target) {
var result = [];
console.log("Filter", term);
$.each(myArray, function(i, v) {
if (v.indexOf(term) == 0) {
result.push(v);
}
});
$(target).val(result.toString());
getSelectedText($(target).val(), term);
}
function getSelectedText(data, letter) {
console.log("Select", data, letter);
$("#autocomplet").get(0).setSelectionRange(letter.length, data.length);
}
$("#autocomplet").keyup(checkEntry);
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id="autocomplet" type="text" />Alternate
Consider the following that uses jQuery UI Autocomplete
$(function() {
var myArray = ["c++", "java", "php", "coldfusion", "javascript", "asp", "ruby"];
function getSelectedText(target, data, letter) {
$(target).get(0).setSelectionRange(letter.length, data.length);
}
$("#autocomplet").autocomplete({
source: function(request, response) {
var results = [];
$.each(myArray, function(index, item) {
if (item.indexOf(request.term) == 0) {
results.push(item);
}
});
response(results);
},
minLength: 1,
select: function(e, ui) {
var cVal = $(this).val();
var sel = ui.item.label;
$(this).val(sel);
getSelectedText(this, sel, cVal);
return false;
}
});
});<link rel="stylesheet" href="//code.jquery.com/ui/1.13.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script src="https://code.jquery.com/ui/1.13.1/jquery-ui.js"></script>
<input id="autocomplet" type="text" />Resources: