CODEWITHSUNDEEP
javascriptjqueryselection-api
Oscar Otero
Oscar Otero

Reputation: 325

Delete characters from my last focused text field when div in pressed

I have a div (button) that when is pressed it deletes the characters of an specific text field. Now I am trying to change the code in a way that delete the characters of the last focused text field.

This is the code that only delete the characters of one text field:

$(".delete").on("mousedown",function(evt) {
        var nameInput = document.querySelector("#name")
        var cursorPosition = nameInput.selectionStart;

    $("#firstName").val(
        function(index, value){
            return value.substr(0,cursorPosition - 1) + value.substr(cursorPosition);
    });

    nameInput.selectionStart = cursorPosition - 1;
    nameInput.selectionEnd = cursorPosition - 1;

    return false;
});

And this is what I haver for now:

$(".delete").on("mousedown",function(evt) {

    var lastFocused;
    $(".item").focusout( function(e) {
      lastFocused = e.target;
    });

    var cursorPosition = lastFocused.selectionStart;

    lastFocused.val(
        function(index, value){
            return value.substr(0,cursorPosition - 1) + value.substr(cursorPosition);
    });

    lastFocused.selectionStart = cursorPosition - 1;
    lastFocused.selectionEnd = cursorPosition - 1;

    return false;
});

The HTML: 

<div class="delete key-btn">
<input id="firstName" name="firstName" type="text" class="item" required/>
<input id="firstName" name="firstName" type="text" class="item" required/>

In console, I'm getting the error: "Cannot read property 'selectionStart' of undefined". Can someone please tell me how to achive this? Thanks

Upvotes: 1

Views: 91

Answers (3)

jtate
jtate

Reputation: 2706

This works:

// 1. this has to be declared globally
var lastFocused;

// 2. you need to set the event handler for the 'item' elements outside of the delete handler
//    I'd also suggest using the 'focus' event here instead of 'focusout'
$(".item").focus(function(e) {
    lastFocused = e.target;
});

$(".delete").on("mousedown", function(evt) {
    // 3. need the null check if none of the inputs have been focused yet
    if (!lastFocused) {
        return;
    }

    var cursorPosition = lastFocused.selectionStart;

    // 4. need to wrap this in the jQuery function to use val()
    $(lastFocused).val(
        function(index, value){
            return value.substr(0,cursorPosition - 1) + value.substr(cursorPosition);
    });

    lastFocused.selectionStart = cursorPosition - 1;
    lastFocused.selectionEnd = cursorPosition - 1;

    return false;
});

Upvotes: 1

Fabrizio
Fabrizio

Reputation: 233

I explain better with code.

var focusedItems = [];

$('.item').on('focusin', function() { focusedItems.push( $(this) ); }
$('.item').on('focusin', function() { focusedItems.splice( $(this), 1 ); }

$('.delete').on('mousedown', function(evt) {

    var lastFocused = focusedItems[ focusedItems.length - 1 ];

    // do whatever you want

}

As you focus on a item you push in the array as a jquery reference, as you focusout you remove it. The last element is the last focused.

Upvotes: 0

Joe Fitzsimmons
Joe Fitzsimmons

Reputation: 1063

You can return the target to the variable of lastFocused and your delete function should work. I'm not sure what the rest of your code looks like, but this is my best guess as to what you're looking for. This will get rid of the error and you can log lastFocused.

lastFocused = $(".item").focusout( function(e) {
    return e.target;
});

Upvotes: 0

Related Questions