Is there a way to detect, if clipboard content has changed? I want to detect if a part of the text that is copied and pasted originally comes from the focused/active paragraph element. The paragraph element is set to contenteditable="true".
HTML
<p class="parent" contenteditable="true">
Text that is first cut and then pasted
</p>
First thing that is not a clipboard. Second thing you can always compare the value to the initial value on a keyup event. Some of the code would be like this:
$('p').keyup(function () {
$(this).text() // or $(this).html();
}
Now, either use the value as a variable and compare it to the initial value, but always remember, you cannot run .val() on a paragraph element. That won't do the job for you. You either need to get all the HTML elements or the text of the element.
To capture the paste/copy event. You can try this code:
$('p').bind('paste', function () {
/* code here */
}
This would capture the paste event.
document.getElementByClassId("parentId").addEventListener("input", function() {
alert("Content changed");
}, false);
FIDDLE
You can. On input compare the text with the original text. If it comes from for example database, make an ajax compare. If it doesn't, create a hidden field with the original content and compare text() of .parent with value of the input[type=hidden]. If you want a snippet, just ask. But I think it is clear enough.
Related
I have a 'click' event on an image in javascript that I want to use to change the text content of the parent element when clicked. However, when I click it, the parent's text changes, but the image deletes itself. I assume I can just create and append a new child element after, but this doesn't seem to be the most efficient, and I would also like to understand why the child element gets deleted. My code looks like the following:
<body>
<ul>
<li> Hello <img src="img/hello.png"></li>
<ul>
<body>
<script>
const helloImage = document.querySelector('img')
helloImage.addEventListener('click', (e) => {
let parentEle = e.target.parentElement
parentEle.textContent = 'bye'
})
<script>
I have looked for a while for an answer, but can't seem to find anything with regards to modern javascript. I found one answer to a similar question with jQuery, but I got the same result when applying the solution's logic. Any help or if you can just point me in the right direction, I would really appreciate it. Thank you!
When you set textContent you overwrite all other child nodes.
From MDN:
Warning: Setting textContent on a node removes all of the node's children and replaces them with a single text node with the given string value.
The corresponding spec for the textContent setter says
String replace all with the given value within this.
If you only want to change the text then alter your HTML and wrap the text you want to change in a distinct element. Then reference that element's textContent in the click handler.
I was wondering which, if any, framework would be the best to achieve capturing keystrokes and appending these to, say a "p" element. What I'm trying to achieve is having the client type something on the keyboard, and then have that sentence or whatever, appended to html, hereby displaying it in the "p" element.
Important notice; I'm not trying to call a function at a given keypress - ex. shift+alt, rather what I'm trying to do is, streaming the keyboardstrokes to an html element.
You don't necessarily need a framework for that task.
Another possbily viable option besides Kai Christensen's would be to create a textbox outside of the visible screen area, set the focus to this textbox automatically and create a change listener for the textbox.
You can then simply replace the content of the target element with the textbox's content whenever it changes.
This saves you the trouble of listening to keyboard events manually, distinguishing upper and lower case letters etc.
I would definitely go with jQuery to capture the keys and then constantly .replace() your div with a div with the same properties that contains the latest version of the updating string. Codecademy has a great set of lessons for this type of jQuery use.
Not that I'm an expert, though. I'm sure someone else has a better answer than my own.
Something like this?
Html
<p id="text"></p>
<input id="textinput"></input>
Js
//Register on keyup, append text from input-field to <p> element.
window.addEventListener("keyup", function () {
document.getElementById("text").innerHTML=document.getElementById('textinput').value;
});
jsfiddle: https://jsfiddle.net/vwobq9xf/1/
I am trying to set a contenteditable span so that it will on the onkeyup event refill the span with formatted text.
However, when I try this the cursor disappears and I can't type anymore. This is because the formatting program, instead of modifying the text already in the span, erases it all and then writes the formatted text in its place.
It is important (I think it is) to note that the element does not appear to be losing focus. Also, because I would like for this project to remain fairly "secret" until it's release, I would rather not give away the source code right now.
This is probably due to you using the innerHTML to set the formatted text.
Instead use childNodes collection to access the content and replace textNodes with formatted html element. This avoids setting innerHTML and avoids loosing focus.
Any reason why jQuery('textarea').text() always returns default value instead of current text when the text area actually has some text and jQuery('textarea')[0].value does return the text?
Take a look at the simple example to see the problem.
Entering a value in an input element (textarea being one of them) doesn't change the markup. text() only grabs the text content of the markup. You should use val() instead:
jQuery('textarea').val()
The jquery way to get the text would be:
jQuery('textarea').val();
With jQuery, I'm interested in creating the following interaction model.
When a user types in the page, anytime jQuery notices three !, "!!!" typed in a row, to be able to do something about it.
After noticing three !, "!!!", wrap the previous sentence (finding the last period from the location the user is currently typing and wrapping a <span class=Important>
How can I do this?
This should work. I've set it up as a live event handler (so that it works for elements dynamically added to the page), but you could use the exact same function as a normal keyup handler on any textarea or input element as well.
It checks to see whether the element's current value ends with !!! and if so performs the replacement, both using simple regular expressions.
$("input,textarea").live("keyup", function() {
var $this = $(this);
var value = $this.val();
if (/!!!$/.test(value)) {
$this.val(value.replace(/(\.?)([^.]+?\.?\s*)!!!$/, '$1<span class="important">$2</span>'));
}
});
As much as I am loathe to say that jQuery isn't good for something - perhaps this kind of logic is better handled on the server. Unless they are typing in an HTML editor where the newly inserted span tags are invisible to the user, it may be a little disconcerting to be typing in a textarea/textbox and suddenly see a bunch of HTML inserted into my comment.