Hey friend, I need help...
I made page with div "contentEditAble" and I want to cancel push divs / br / p
and stay it empty from elements after it's do function because it's do function that create massage like in "What'sApp Web" ...
The first lines (1-6) doesnt work to click enter but if clicking "send" button its work...
But please first you open the link in the div with contenteditable click at least twice timesenter and you will Understand the problem...
You can see the link: jsfiddle.net/sarelyuval/nL1rbeL9
Thank you!
var t = document.createTextNode(input.textContent); // line no 56
instead of input.innerHTML you need content input.textContent
I forgot to say, I want to add for it also Images (icons...)
so I need only cancel push the divs and br in chrome
Related
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.
Is it possible to achieve formatting of text in JS alert message?
<script>
function myFunction() {
alert("1.Enter your name. 2. Enter your mobile no. 3.Do not press back
button.");
}
</script>
I want these 3 messages to appear one below the other. I tried:
<p>1.Enter your name.</p><p> 2. Enter your mobile no.</p><p> 3.Do not
press back button.</p>
Didn't work. Also, wish to add this img src tag after the last message:
<img src="http://forums.nextgames.com/resources/emoji/smiley.png" alt="smily"/>
Thank you.
The alert box is a object, and not related to CSS. To do this style of thing you would need to create an HTML element and mimic the alert() functionality. The jQuery UI Modal box does a lot of the work for you.
try adding "/n" before the lines example "\n2", "\n3"
The browser alert box does not support rendering HTML, however you can use plain-text formatting like \n newline and \t tab.
alert("1.Enter your name.\n2. Enter your mobile no.\n3.Do not press back button.");
I have an input field inside a div:
<div id="fields">
<input class="letters" type="text" name="lettersField" value="" />
</div>
and some jquery for it
$("#fields").on("change paste keyup focus", ".letters", function(){
// A new div is created with some p elements inside it like so
$("body").append('<div id="suggestions"></div>');
$("#suggestions").html("<p>words</p>");
});
Then finally i want to call a click event on those "p" elements like so:
$("body").on("click", "p", function(){
console.log("p element clicked");
});
The problem i am facing is that i need to click the "p" element TWICE for the FIRST time that the console.log appears, then when the input loses focus, i can click the "p" element and for each click have a console.log appear. Also, if i first click the input field, then click another input field or something else, and then go back to clicking the "p" element, it then logs the click on the first click (that's why i think that the input losing focus has something to do with the double click required).
I am not only interested in a specific solution to my problem, but also possibly a general understanding of what is happening here, if anyone could be bothered that would be awesome. Thanks in advance!!!
UPDATE FROM MY COMMENT
Hello again, i now noticed something, after running your codepen
again, give focus to the input field, then type "asd" on it, and THEN
try to click on the "p" element, that should reproduce the problem.
ANOTHER UPDATE FROM MY COMMENT
Hello once again, i managed to solve my problem by removing the
"change" event and leaving the rest events in tact (i had originally
also added a flag variable to create the window only once). Thanks
again for the help, if someone knows any more information on why the
"change" event would do that i would welcome it.
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?
I have a form and after submiting it I have a review page. If user wants to edit something in the form I use
Edit
By this way I don't have to repopulate datas from somewhere. It basically goes backward.
The problem is when I turn back to page, If I have form validation errors from previous page, It still remains there.
Therefore, what I want to do is to hide the div id/class when I click Edit button.
Form validation error are in a div so probably solution with hiding it will be better.
Thanks
$(document).ready(function() {
$("#yourDivId").hide();
});
call a javascript function on EDIT button instead of calling history.go(-1), and inside that javascript function first toggle the divs that you want to hide, and then do history.back