Placing cursor and focus inside contenteditable div onclick - javascript

When you click on my td the hidden div will display over the top of it and the div will be made contenteditable but I want the mouse cursor to appear in the so after a single click I can start typing. Currently you need to click twice -- once to focus, and again to place the cursor.
Please don't worry about why I'm doing it this way, I've just stripped my code down to the essentials to isolate this problem.
$(document).ready(function() {
$("td").on("mousedown", function() {
var cellOffset = $(this).offset();
$('#cellSelect').offset({ top:cellOffset.top-1, left:cellOffset.left-1 });
$('#cellSelect').show(0);
$('#cellSelect').attr('contenteditable','true');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<div id="cellSelect" style="display:none;position:absolute;border: 2px solid blue;width:91px;height:91px"></div>
<table border="1" cellpadding="10" width="100" height="100">
<tr>
<td id="1-1"></td>
</tr>
</table>

Call focus on the element.
You'll need to wrap the focus call in a setTimeout to ensure that the element is editable before focusing, otherwise you won't be able to type.
$(document).ready(function() {
$("td").on("mousedown", function() {
var cellOffset = $(this).offset();
$('#cellSelect').offset({ top:cellOffset.top-1, left:cellOffset.left-1 });
$('#cellSelect').show(0);
$('#cellSelect').attr('contenteditable','true');
setTimeout(() => $('#cellSelect').focus(), 0)
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<div id="cellSelect" style="display:none;position:absolute;border: 2px solid blue;width:91px;height:91px"></div>
<table border="1" cellpadding="10" width="100" height="100">
<tr>
<td id="1-1"></td>
</tr>
</table>

Related

Changing the html of a td tag dynamically

When the edit function is triggered the td with id "promo1" changes its html to show the options save delete rule and cancel. cancel is in an a tag with an onclick function called "cancel()". When clicked this should revert the td tag "promo1" back to the image set. However this doesnt work when the onclick is coming from the cancel a tag in the td tag "promo1" but it works when the cancel() function is triggered from the Cancel Button, any clues as to why this is occurring and fixes?
function edit(stringID){
console.log (stringID);
var id = '#promo' + stringID;
$("#promo1").html("<div style='width:200px'><a onclick='save()' style='margin-right:10px'><b>Save</b></a> <a onclick='save()' style='margin-right:10px'><b>Delete Rule</b></a> <a onclick='cancel()'><b>Cancel</b></a><div>");
}
function cancel() {
$("#promo1").html("<img src='dist/img/editButton.png'>");
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr style="border-bottom: 1px solid #f4f4f4;">
<td data-field="margin">15%</td>
<td data-field="promo">Promotion Role 1</td>
<td id="promo1" onclick="edit('1')" style="float:right"><img src="dist/img/editButton.png"></td>
</tr>
</table>
<button onclick="cancel()">Cancel Button</button>
I think this is what you are looking for:
function edit(stringID){
console.log (stringID);
var id = '#promo' + stringID;
$("#promo1").html("<div style='width:200px'><a onclick='save()' style='margin-right:10px'><b>Save</b></a> <a onclick='save()' style='margin-right:10px'><b>Delete Rule</b></a> <a onclick='cancel()'><b>Cancel</b></a><div>");
}
function cancel() {
$("#promo1").html("<img src='dist/img/editButton.png' onclick='edit(1)'>");
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr style="border-bottom: 1px solid #f4f4f4;">
<td data-field="margin">15%</td>
<td data-field="promo">Promotion Role 1</td>
<td id="promo1" style="float:right"><img src="dist/img/editButton.png" onclick="edit(1)"></td>
</tr>
</table>
<button onclick="cancel()">Cancel Button</button>
Use onclick event on <img> instead of <td> and also include onclick='edit(1)' in your cancel(). Rest of your code works fine.

How to bind a .click() event only the container?

I want the user entry to open up accordion-style, but a .click() event is triggered even if I click on any other element inside the red box - the text, the image, etc.
I'd like to only have the "outer" whitespace cause the event to trigger.
How do I accomplish this?
$('#box').click(function(e) {
console.log(e);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="box" style="width:80%;background:red;">
<table>
<tr>
<td><img src="http://i.imgur.com/NaCmGyX.jpg" style="width:50px;height:50px;border-radius:50%;"></td>
<td><b>John McDerpenstein</b></td>
<td><p>
A blurb goes here
</p></td>
</tr>
</table>
</div>
fiddle
You can check the target property of the event to see if it was the #box element directly by using is():
$('#box').click(function(e) {
if ($(this).is(e.target))
console.log(e);
});
Updated fiddle
<html>
<body>
<div id="box" style="width:80%;background:red;">
<table>
<tr>
<td><img src="http://i.imgur.com/NaCmGyX.jpg" style="width:50px;height:50px;border-radius:50%;"></td>
<td><b>John McDerpenstein</b></td>
<td><p>
A blurb goes here
</p></td>
</tr>
</table>
</div>
<script src="jquery-1.12.3.min.js"></script>
<script>
$('img').click(function(e) {
console.log(e);
});
</script>
</html>
Just check the e.target.id to see if it matches the specific id of the outer box you want. Example below:
$('#box').click(function(e) {
if (e.target.id === "box")
console.log('click');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="box" style="width:80%;background:red;">this is the outer box
<table>
<tr>
<td><img src="http://i.imgur.com/NaCmGyX.jpg" style="width:50px;height:50px;border-radius:50%;"></td>
<td><b>John McDerpenstein</b></td>
<td><p>
A blurb goes here
</p></td>
</tr>
</table>
</div>
If you want to add the event to the parent container you will have to stop the propagation on all the child elements that will not need a click event .
Example :
since #box has the click and box is your container
you will need to give image an id and stop the propagation
$('#imageID').click(function(e){
e.stopPropagation();
})
With the example above when you click the image nothing will happen , but if you click the red container then your event will log.
The best way is to prevent the event if the click is done on child:
$('#box').click(function(e) {
if (!$(this).is(e.target)) {
return e.preventDefault()
}
// code here (or nothing, href="" action)
});

How to create an 'edit' / 'cancel edit' box with jQuery?

I have a table where I have multiple values in cells and columns. When the user clicks anywhere on a TD cell I want it to:
become a textarea
paste the current text into the textarea
put a cancel button under it
once the cancel button is pressed, I want everything to change back as it was before
ability to do it again and again from Point #1
Here is my attempt:
HTML:
<table style="border: 1px solid black;text-align: center;" id="tb">
<tr style="border: 1px solid black;">
<td style="border: 1px solid black;width:200px;height:100px;">
<div class="id1">TEST1</div>
</td>
<td style="border: 1px solid black;width:200px;height:100px;">
<div class="id2">TEST2</div></td>
<td style="border: 1px solid black;width:200px;height:100px;">
<div class="id3">TEST3</div></td>
</tr>
</table>
jQuery:
var t = '';
var prevHtml = '';
var thisElement = '';
$(document).on('click', '#tb td', function()
{ prevHtml = $(this).html();
thisElement = this;
if ($(this).attr('data-status') == 'active'){return;};
$(this).attr('data-status', 'active');
t = $(this).text();
$(this).html('<div class="row custom-status-main"><div class="col-md-12"><textarea maxlength="2000" rows="3" class="form-control" style="font-size: 12px;width: 80%;resize:vertical;">'+t+'</textarea></div></div><div class="row" style="margin-top:5px;"<div class="col-md-6"><button class="btn btn-xs btn-grey cancel-btn">Cancel</button></div></div>');
});
$(document).on('click', '.cancel-btn', function()
{
$(thisElement).html(prevHtml);
$(thisElement).removeAttr('data-custom-status');
});
This is my fiddle: https://jsfiddle.net/vsauhkfk/1/
My attempt is working for Point #4 but then it seems like nothing happens when clicking on the TD. What am I missing here?
You were almost there. You had 1 typo and 1 thing missing in your Cancel function that was causing you problems.
You had:
$(thisElement).removeAttr('data-custom-status');
It should be:
$(thisElement).removeAttr('data-status');
You were adding the 'data-status' attribute to the element but never removing it.
Also you need to add the stopPropagation() call in your cancel method. Otherwise your click on the cancel button will run your cancel method but the click event will propagate up the DOM to the TD element again and re-trigger your td click.
Here's the code for your cancel function:
$(document).on('click', '.cancel-btn', function(e)
{
$(thisElement).html(prevHtml);
$(thisElement).removeAttr('data-status');
e.stopPropagation();
});
See the working fiddle here: https://jsfiddle.net/vsauhkfk/2/

How to change HTML element value using javascript?

I have DIV and inside div it has table. I want to change the one of the column value of table using java script. I can do it by getting the element id of column, but there is no any id assigned to any table's column. Below is the example.
<div id="usersec">
<TABLE style="TEXT-ALIGN: center; WIDTH: 279px; HEIGHT: 70px">
<TBODY>
<TR>
<TD style="FONT-FAMILY: Verdana" vAlign=center align=middle>Talk to me </TD></TR></TBODY></TABLE>
</div>
Is it possible to change the "Talk to me" text using javascript?
If your userbase is IE8+, you can safely use querySelector:
var container = document.getElementById('usersec');
var td = container.querySelector('tr:first-child > td');
if(td){
td.innerHTML = "New Text!";
}
Here's a JSFIDDLE: http://jsfiddle.net/rgthree/YkhwE/
querySelector (or querySelectorAll) allow you to target elements in the DOM via CSS syntax, which is very useful. It's very well supported, in every current and previous browser. (via Can I Use)
Yes, you need to get the element and then set a new value to element.innerHTML. It's easiest if you give an id to the element that you want to change but you don't need to
jsFiddle
<script type="text/javascript">
var usersec = document.getElementById('usersec');
var td = usersec.getElementsByTagName('td')[0];
td.innerHTML = 'New value';
</script>
You can assign an id to the TD, and use that;
<div id="usersec">
<TABLE style="TEXT-ALIGN: center; WIDTH: 279px; HEIGHT: 70px">
<TBODY>
<TR>
<TD style="FONT-FAMILY: Verdana" vAlign=center align=middle id="cellToChange">Talk to me</TD>
</TR></TBODY></TABLE>
</div>
<script type="text/javascript">
document.getElementById("cellToChange").innerText = "Go on, talk to me please!";
</script>

hide toggle div when clicking control in toggle div

I use a toggle div in page. I have a textbox and a dropdownlist in it.
<div class="Search" style="display: none" >
<table width="100%" style="border: 1px solid #fff; border-radius:5px;padding:15px">
<tr>
<td width="60px">دسته بندی</td>
<td>
<asp:DropDownList ID="CategoryDropDownList" runat="server" />
</td>
</tr>
<tr>
<td>کلمه کلیدی</td>
<td>
<asp:TextBox ID="SearchTextBox" runat="server" Width="95%" />
</td>
<td><asp:ImageButton runat="server" ID="SerachButton" ImageUrl="~/images/btnSearchIcon.png" OnClick="SerachButton_Click" ValidationGroup="Search" /></td>
</tr>
</table>
</div>
I hide it when clicking anywhere on the page.
<script type="text/javascript">
$(document).ready(function () {
$('#showSreachDiv').click(function (evt) {
$(".Search").toggle("slow");
evt.stopPropagation();
});
$(document).click(function () {
var $el = $(".Search");
// toggle div
if ($el.is(":visible")) {
// fade out
$(".Search").toggle("slow");
}
});
});
</script>
But when i clicking control in toggle div, hide it.
I want insert text in textbox but don't it.
Try this:
$(document).ready(function () {
$('#showSreachDiv').toggle(function (evt) {
$(".Search").fadeout("slow");
}, function(evt){
$(".Search").fadein("slow");
}
);
}
Try This example:
<script type="text/javascript" language="javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#showSreachDiv').toggle(function (evt) {
$(".Search").toggle("slow");
}, function(evt){
$(".Search").toggle("slow");
}
);
});
</script>
Toggle
<div class="search" style="border:solid 2px #CCC;display:none;">
<h1>//Your Work Here...</h1>
</div>
You could check in document.click whether the clicked element is a child of the search DIV and in that case, cancel the click handler:
$(document).click(function (evt) {
if ($(evt.target).parents('.Search').length > 0) return;
// put original code here ...
});

Categories

Resources