I have a text area:
<textarea type="input" id="txtText">Hello+world-how*are+you</textarea>
I want a way for backspace to delete a whole word every time it is clicked using Javascript or Angular js.
When I press backspace I want it to split by operators and delete from the end. The first backspaces in the above example would delete 'you' then 'are' then 'how' and so on.
But if the mouse is on 'world' then it deletes 'world' first, then 'Hello'.
Here is a solution than uses the data attribute to match for changes: jsFiddle
jQuery('#EditableDiv').keyup(function(e) {
if (jQuery(e.target).text().length < jQuery(e.target).attr("data-value").length) {
var data = jQuery(e.target).attr("data-value").split(" ");
var text = jQuery(e.target).text().split(" ");
for (var a = 0; a < data.length; a++) {
if (text[a] != data[a]) {
text.splice(a, 1);
break;
}
}
jQuery(e.target).text(text.join(" "));
}
jQuery(e.target).attr("data-value", jQuery(e.target).text());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="EditableDiv" contenteditable="true" data-value="Hello, how are you" class="size">Hello, how are you</div>
Related
and then you can type the second keypress and so forth
so you can type you own name in the h1 or what every you want
or is the only way to do it via $("input") I don't want a textbox
$(document).keypress(function(event) {
$("h1").text(event.key);
});
do I use a for loop to save the first letter into an array or "keypress" + "text(event.key)" + "?
then add the second to indice 1?
for (var i = 0; i < $("h1").text(event.key).length; i++) {
var textType = $("h1").text(event.key)
});
thanks in advance, trying to wrap my head around it
You just need to append the newest character on to whatever the text of the h1 currently is.
let firstLetter = "";
$(document).keypress(function(event) {
$("h1").text($("h1").text() + event.key);
firstLetter = $("h1").text()[0]; // Save the first letter
console.log(firstLetter);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h1></h1>
This code uses ISBN's to search query Amazon such as "128584632X". It doesnt work with spaced isbn's so I need to have them filtered with spaces removed such as with "12 858 463 2X". I need "var items" to be filtered of spaces.
JSFiddle here: https://jsfiddle.net/jfjd8a3h/
//the input box.
var input = document.getElementById('numbers');
//adding an event listener for change on the input box
input.addEventListener('input', handler, false);
//function that runs when the change event is emitted
function handler () {
var items = input.value.replace(/\r?\n/g, ' ').split(' ');
length = items.length;
console.log('your collection', items);
for (var i = 0; i < length; i++) {
if ( items[i] && !isNaN(items[i]) ) {
console.log('opening page for isbn ', items[i])
openPage(items[i]);
}
}
}
//opens the tab for one isbn number
function openPage (isbn) {
var base = 'https://www.amazon.ca/s/ref=nb_sb_noss?url=search-alias%3Daps&field-keywords='
window.open(base + isbn)
}
<h1>Amazon Bulk ISBN Search</h1>
<p>... note, after paste you may need to click outside the text area or tab out to fire the change event.</p>
<textarea id=numbers placeholder="paste isbn numbers as csv here">
</textarea>
I think that what you want is this:
var items = input.value.replace(/\r?\n/g, '!').replace(/\s/g, '').split('!')
I had to use ! as a replace for newline first because it seems that \s is striping the newlines too.
Well, at least this should get you started.
Another way may be first using split on newlines, then running the replace on each item in the collection. Would be more readable I guess.
EDIT: This condition is preventing the code that opens the page to run, becase the ISBN ends in X,so it is not a number: && !isNaN(items[i])
https://jsfiddle.net/jfjd8a3h/1/
I'm looking for a way to capture the specific character (or character index in text) after the user clicks on it inside of a contenteditable div. Just to provide an example, please consider the following HTML:
<div contenteditable="true">
Hello world
</div>
Suppose the user clicks right between "o" and "r", is there a way to know that, using JavaScript?
I'd imagine this would be covered by the Selection API but all my inquiry so far has produced me nothing.
I appreciate any help that you can give me.
You can see the caret position, i have done a small snippet for you here. Have a look at it.
enter code herehttp://codepen.io/19sthil80/pen/pEooVR
You can always do something like this. Codepen Link
I have put an alert in so that you can see that it does indeed know what you clicked and if you click a space as in between Hello and World it knows as well.
var div = document.getElementById("div");
function clickify (e) {
var arr = (typeof e.innerText !== 'undefined') ? e.innerText.split("") : e.textContent.split(""),
max = arr.length,
i = 0,
template = "$c",
result = "";
for (; i < max; i += 1) {
result += template.replace("$c", arr[i]);
}
e.innerHTML = result;
}
clickify(div);
so I have a site and I would like my users to not be able to words like ".com" or ".net" etc. If they do enter it then i just want it to replace with a space. So far I have toe javascript code for if users were to type in any html code into the text area, then it would replace it with a space, I want the same to to happen if they were to type out those certain words.
function stoppedTyping(){
if(this.value.length > 0) {
document.getElementById('post_btn').disabled = false;
} else {
document.getElementById('post_btn').disabled = true;
}
var re = /(<([^>]+)>)/gi;
for (i=0; i < arguments.length; i++){
arguments[i].value=arguments[i].value.replace(re, "");
}
var se = ".com";
for(a=0; a < arguments.length; a++){
arguments[a].value=arguments[a].value.replace(se, "");
}
}
The last var se.... is my attempt to try and replace the word. But it isn't working. Thanks in advance!
For real-time replacements, I would use onkeyup to listen to whenever the user finishes pressing a key. Here's a JSFiddle demo: http://jsfiddle.net/kLTq5/1/
I am designing a language learning site. I want to have it when someone enters text into the text box it starts to roll over certain images. Take a look at my sample below
http://imageshack.us/photo/my-images/827/hiraganaquiz2.jpg/
So, when the user enters "na" the first symbol highlights as you see in my sample. When he enters "ma" the second symbol should highlight/rollover. I want all the symbols to stay rolled over while the correct text is entered. so if the user types "nama" the first two symbols should be rolled over to show they got it correct and once the last correct text is entered all three will be rolled over.
Can this by done? I will accept advanced and simple methods.
$(document).ready(function() {
var text = ['na', 'ma', 'ba'];
$("#elemID").on('keyup', function() {
var typed = this.value;
$.each(text, function(index, item) {
if (typed.indexOf(item)!=-1) {
$('li', 'ul').eq(index).find('img').addClass('correct');
}else{
$('li', 'ul').eq(index).find('img').removeClass('correct');
}
});
});
});
FIDDLE
EDIT:
At the top of your page, in the <head> section, add:
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
Then wrap the code in document.ready, see the edited code above on how to do that ?
On change of the input box, you could do something like this: (totally untested)
var parts = ["na", "ma", "blah"];
var start = 0;
for (var i = 0; i < parts.length; i++) {
var currentPart = parts[i];
var $img = $(".images img:nth-child(" + i + ")");
var end = start + currentPart.length;
if (str.length >= end && str.slice(start, start + currentPart.length) == currentPart) {
$img.addClass("highlight");
} else {
$img.removeClass("highlight");
}
start += currentPart.length;
}