Getting control where caret was displayed last - javascript

I am creating an app where it is required to add or delete lines to a HTML table.
I programmed the function to add a line to the table in jQuery, like:
function othaddrAddLine(evt) {
var oarow = $("span#othaddrRowToAdd > table > tbody").html();
$("div#tabs-othaddrs > table#TableOthAddr > tbody").append(oarow);
}
$(document).ready(function () {
$("button#othaddr-add").click(othaddrAddLine);
$("button#othaddr-del").click(othaddrDelLine);
});
where that span contains hidden text.
Now I want to program the othaddDelLine function, where I want to delete the line of the table that was in focus.
How can I program this in jQuery or JavaScript? Is it possible to get the text input control where the caret was, in order to get the parent <tr> element and then delete the row.
Thank you.

I would do it in this way:
Add a focus event listener to all the inputs you have in your table, including the ones you add dynamically.
Whenever one of those elements is focused, keep a reference to it in a variable. This will be the "last" focused element.
If the user clicks delete, you can use the reference to that "last" focused input and get its parent in order to delete it.
Hope that helps.

Related

Vanilla JavaScript toggle element with text to editable element on edit button click

I'm trying to make my first vanilla JavaScript app which is (surprisingly :D) To-Do App
I'm currently stuck with the update todo part,
I got this part of code doing to-do creation
let createTodo = (todo) => {
let span = document.createElement('span');
span.classList.add('text');
spanParent.prepend(span);
span.innerHTML += `${todo.text}`;
let edit = document.createElement('span');
edit.classList.add('edit');
spanParent.append(edit);
edit.addEventListener('click', (e) => {
console.log(e);
});
let editIcon = document.createElement('i');
editIcon.classList.add('fa-solid');
editIcon.classList.add('fa-pen-to-square');
edit.prepend(editIcon);
};
I want that when user click edit the todo text turn to editable input and save new value on enter or clicking outside and it become not editable again until pressing edit
I did some research and come across (contentEditable) attribute , but when tried to apply it things went sideways,
when i turn it on the edit icon disappear and the text stay editable
i think i need to do some kind of form that show on edit but don't know how to approach this idea
EDIT
I'll try to explain more clearly hopefully,
I need to make the to-do text to be:
1- editable when user click the edit button
2- save the new user input text
3- become non-editable once user save updates
4- become editable again if user press edit button again
Thanks in advance
Based on the description that you provided, there is technically no need of using a form. You could stick to a standalone button and give it a click handler.
The click handler of this EDIT button works as follows: it sets the contenteditable attribute on the to-do text element (the span element above). This makes the text editable.
Then when the SAVE button is pressed, you should do the following: get the textContent of the span element, store it locally (I guess you're using localStorage) and then finally remove the contenteditable attribute from the span element.
BTW, I feel that there is a lot of room of improvement in your code, for e.g. in variable naming, in the usage of methods, and in the order of statements:
append() and prepend() is, more or less, meant for bulk-insertion of nodes into the DOM. In your case, you have just one single node to add and so you could just stick to using insertBefore() or `appendChild().
Most probably, the to-do text is styled as a block in your application. Hence, it's better to make it a <div> element, instead of a <span>.
There is an awesome resource to learn about the HTML DOM, along with exercises to practice your skills: HTML DOM Introduction — CodeGuage.

Click listener fired when click on child input

I labeled this answer as angularjs because I'm using angular, but maybe it's a generic javascript problem.
I have a table, which rows can be selected by clicking on each row. Each cell of each row contains interactive elements such as links, buttons and input fields. The problem is that, when I click on any element contained on the row, the click event bubbles and reaches the row click listener, and then the row gets selected.
My current workaround is to check the element name that is triggering the event, and if it is not the row, ignore it.
var target = e.target || e.currentTarget;
if (/button|input|^a$|select/i.test(target.nodeName) || /glyphicon/i.test(target.className)) {
// Only reacth if the click does not comes from a button or an input
console.log(e)
return
}
The way I'm installing the event listener is with ng-click="switchSelected($index,$event)"
There should be a better way.I don't know if it is possible to restrict it to the clicked element, but I don't want that neither, because if they click on an empty space, I want the row to be selected.
Regards

How can I set focus on my next textbox in another row after saving?

Hi I just wanted to ask you guys if how can I set my cursor to focus on the next text box after saving. I have a table where there is a text box and a save button on each row. All I wanted is when I click the save button it will focus on the next textbox in the next row? thank you in advance for helping me.
Try like this
$("#savebuttonId").click(function () {
$(this).closest("tr").next().find("textarea").focus();
});
First you need to find the current parent tr using closest(), then use next() to find the next tr. Finally use find() to get the child textarea.

Make contents in div not editable (clickable)

I don't know if this is possible or not.
I have a dynamic form with contents that are dynamically created. Every time a button is clicked, a new div element is added. And what I wanted to do is to make the previous div not editable, that is, the input fields could not be used, buttons could not be clicked.
Is it doable?
Thanks.
Try something like this:
// Disable all input-like elements in the divs except for the last div
$(".divclass:not(:last-child) :input").attr("disabled", true);
Where divclass is the class of the divs you mentioned.
Example: http://jsfiddle.net/grc4/LrxkU/2/
Maby something like this? http://jsfiddle.net/ng4Ct/2/
If you can access your previous div elements you can add attribute disabled="disabled" to them.
You can fire the code that adds the disabled attribute to required elements on the same button click function.
Well, you can either access the specific elements inside the DIV and disable them using Javascript, or you can access the DIV and then loop through all the elements inside (probably preferable), and disable them automatically with Javascript.
Of course it depends on how your code is written, can you provide some of the code that generates the DIVs?

Switchable selectable text

I have a table which is filled with data from a database. Some javascript allows a user to select certain rows and take some actions. I allow users to click one row and then to shift click another row to create a group (as well as alt-click to select/deselect individual rows).
The problem is I don't like how the text highlights when they shift click. Is there some CSS setting or javascript/jQuery solution to disable the selectable text (cross browser preferablly or just in firefox).
If possible I also want to be able to let the user select text to copy and paste sometimes or inside a textbox form input inside the same table so I would like to be able to enable and disable the selecting of text somehow. Any ideas?
this should do the trick:
$('td').disableSelection();
example:
http://jsfiddle.net/GhfuJ/1/
Here's one way you could completely disable text selection:
$("selector").bind($.support.selectstart ? "selectstart" : "mousedown", function(event) {
event.preventDefault();
});
This is how jQueryUI implements its disableSelection() method.
You could tailor your selector to exclude textarea elements, or wrap code inside the event handler with an if block that evaluates a boolean that gets set under certain circumstances (For example, you could turn on booleans when the user is clicking or shift/alt + clicking).

Categories

Resources