I created on page where there is editable content.
I want to give user chance to add data on that page.
like, if they click 'textbox' there is will textbox in certain div.
but now if they add div and then inside that div, they want to add anything than how its possible ?
How can get current div(where my mouse current position), so if i select particular div which is editable, than they can add textbox inside it in.
checkout fiddle, there is something like document.activeElement but its not working.
so how to get current div and add element into that particular div only.
When my mouse is in particular div / form than i want to add textbox / h1 should be added in particular that div / form.
P.S.
I need to get Id of my current cursor position.
if my cursor is inside form1 than i should get form1 and append html inside that.
i cant use $(this) because, this will return me where i clicked, not where my cursor position is.
apply this it works
$(document).ready(function(){
$(".addForm").on("click", function(){
var current = $(this);//use $(this) at the place of document.activeElement
var myCurrentId = this.id;// here can also use $(this).attr("id");
$(".uiHTML").append("<form id='1' contenteditable='true'></form>");
});
$(".addH1").on("click", function(){
var current = $(this);
var myCurrentId = this.id;// here can also use $(this).attr("id");
$(".uiHTML").append("<h1>Hello</h1>");
});
});
see demo
Related
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.
I have a textarea in which text pieces (stored on each data-code attribute) are appended when clicking on an specific DIV:
$(document).on('click', '.extrasPanel .contentVars div', function(e){
varCode = $('.active').attr('data-code');
varText=$(document).find('textarea').val();
$(document).find('textarea').val(varText+varCode);
checkCounter(e);
});
Once a .contenVars div is clicked, its data-code value is added to whatever is typed on textarea, and to keep typing the user must click again on the textarea.
I would like the user to keep typing after importing this pieces of text widthout needing to click back on it, so that the cursor remains on the last position, after the last imported character (as if you would have pasted it).
I have tried adding e.preventDefault; at the end of the function, with no possitive result.
If you're using jQuery, you can try .focus()
jQuery('textarea').focus();
May this link will helps you..
jquery-caret.js
This is a very simple lightweight plugin to allow you to move the caret (or cursor) position in an or element
$('textarea').caretToEnd();
I have div having class name ".modalPopup" inside the div I have multiple table and inside table I have divs and inside the multiple controls like text box(input) and dropdownlists(select).
I want is that I want to fire click event when user click on any where on main div which have "modalPopup " except the dropdownlist(select).
I try using my options but I can't get the specific click event.
Like this:
$('.modalPopup :not(modalPopup select)').click(function(){
document.write("working for click except select ");
});
Can any one please provide me the solution?
Easiest way is to just bind the click event on the div with class of modalPopup and then check what the user actually clicked on using e.target:
$('.modalPopup').click(function(e){
if (!$(e.target).is('select')) {
document.write("working for click except select ");
}
});
e.target is the dom element that was clicked. $(e.target).is('select') gets that dom element and created a jQuery object from it and checks if it is a select.
JSFiddle Example
You are missing a dot before .modalPopup in the not() condition.
$('.modalPopup :not(.modalPopup select)').click(function(){ document.write("working for click except select "); });
At my web page, I have several text box controls (eg. Input type="text" ...)
What I would like to do is display every ID for every text box whenever or whatever text box i make focus event.
I already try this.
alert($("*:focus").attr("id"));
But it return undefined message.
So, Please let me know is there any way to know that which text box, i mean text box ID, is I already focused dynamically.
Setting a variable on focus, and removing the variable on blur will do the job:
var currentFocus = null; //to be defined in the global scope, if you want
// to access this property across your whole script
$("input").focus(function(){
currentFocus = this.id;
}).blur(function(){
currentFocus = null;
});
You may need to look if it has an ID or not. I made an example: http://jsbin.com/opocoz/2/edit
Gday All,
The following code displays a div based on the option that has been selected within a drop down box.
$(document).ready(function() {
$("#SomeDropdown").change(function() {
var theVal = $("#SomeDropdown option:selected").val();
$("#SomeDiv_" + theVal).css("visibility", "visible");
});
});
How do I display the div when the user hovers over the value within the drop down box? (Instead of clicking on it)
Cheers,
Michael
I don't think you can with a standard select box. You can only attach a hover event on the actual drop down as a whole (though you can attach it only if a value is selected in it).
If you must have this functionality, you may need to develop your own styled drop down... however this has it's own problems (usability for one).