I have made A user-script ( DOM Javascript) which included a text-box. I want the text-box to open up a google search of the input when an item is dropped. For example, if I select the word "Javascript" and drag it into the text-box, it will open up a Google search of "Javascript".
This is the code I have:
//only Javascript
var input2=document.createElement("input");
input2.type="text";
input2.id="Word_search";
input2.addEventListener("drop", GoogleWord);
document.body.appendChild(input2);
function GoogleWord(){
console.log("hi");
var text = document.getElementById("Word_search").value;
alert(text);
window.open('https://www.google.com/search?q=' + text,'_blank');
}
(I could not use a snippet because It does not seem to work inside the snippet)
The Main problem is that the function runs before the text is inserted into the textbox, and therefore, will do a blank Google search.
So, I only need the text to be inside the text-box when the function runs.
The drop event apparently occurs before the input is updated with the dropped text. The way to get the dropped text is with event.dataTransfer.getData(mimetype).
function GoogleWord(event){
console.log("hi");
var text = event.dataTransfer.getData('text/plain');
alert(text);
window.open('https://www.google.com/search?q=' + text,'_blank');
}
FIDDLE
Try this,
function GoogleWord(e){
console.log("hi");
var text = e.target.value;
alert(text);
window.open('https://www.google.com/search?q=' + text,'_blank');
}
Related
function insertText(elemID, text) {
var elem = document.getElementById(elemID);
elem.innerHTML += text;
}
This function works well to use buttons to add strings to a textarea in order to create a complex paragraph.
However, if the user adds/deletes/modifies that text with the keyboard, the function will no longer work until the form is refreshed, which loses the text changes.
Is there a way to modify the function to allow resuming use of the function after any keyboard edits without losing the text that has been added and modified?
Basically a non-jQuery duplicate of Why is my text not being added to the textarea after the second change event? .
innerHTML sets the default value of the textarea. Once the textarea was edited by the user, the current value is stored in the value property.
Use
elem.value += text;
instead.
I'm using w3schools' script for copying text to clipboard when clicked, but the script only works when a textfield is present. I'm trying to have just an icon show with no textfield, so when a user clicks the icon, the coded text is automatically copied to the clipboard.
Their script is located here: https://www.w3schools.com/howto/howto_js_copy_clipboard.asp
I'm using display:none; to hide the input field. Despite everything appearing to work as far as the JS is concerned, it just doesn't copy the text.
Is there a way, maybe via another method or script, that will allow me to just show an icon for copying text rather than a field + icon/link?
There is a way to copy hidden inputs, but not using display:none, you could send the input to a location out of view, using something like position:absolute;left:-1000px, example:
function myFunction() {
var copyText = document.getElementById("myInput");
copyText.select();
document.execCommand("copy");
alert("Copied the text: " + copyText.value);
}
#myInput{position:absolute;left:-1000px}
<input type="text" value="Hello World" id="myInput">
<button onclick="myFunction()">Copy text</button>
Here:
var copyTextareaBtn = document.querySelector('.btn4');
copyTextareaBtn.addEventListener('click', function(event) {
var copyTextarea = document.querySelector('.block2');
copyTextarea.select();
try {
var successful = document.execCommand('copy');
var msg = successful ? 'successful' : 'unsuccessful';
console.log('Copying text command was ' + msg);
} catch (err) {
console.log('Oops, unable to copy');
}
});
Well I dont know if I understood your question, but I assumed you want to copy some text without displaying the text in your html page, with that script you are just getting the element from the id of the text imput whenever the buttom is pressed.
If you hide it you wouldnt be able to acces it. If you just want to copy some hiden text whenever you press the bottom, you should put your text in your javascript file and not into your htlm page :)
I hope my answer helped you!
function copyToClipboard(text){
var dummy = document.createElement("textarea");
document.body.appendChild(dummy);
dummy.value = text;
dummy.select();
document.execCommand("copy");
document.body.removeChild(dummy);
}
I am using kendo editor in my application to capture some information. One of the requirements is to save the text entered in the same without any markup. I understand that the piece of code:
$("#editor").data("kendoEditor").value();
will give me the text entered in the control with the markup. But is there any way to retrieve only the text entered? I even wanted the number of lines in the text area that the content occupies.
You can use
var text = $("<div/>").html($("#editor").data("kendoEditor").value()).text();
Try the following code :
try {
var value = $("#editor").data("kendoEditor").value();
var text = value.replace(/(<([^>]+)>)/ig,"");
alert(text);
}
catch (e) { }
I've built a page where you can filter results by typing into an input box.
Basic mechanics are:
Start typing, input event is fired, elements without matching text begin hiding
If input becomes empty (or if you click a reset button), all elements are shown again
I have noticed a problem, though, when highlighting text. Say I type "apple" into the input. Then I highlight it, and type "orange."
If an element exists on the page containing "orange," but it was already hidden because I filtered for "apple," it does not show up. I have gathered this is because the input never truly empties; rather, I simply replace "apple" with the "o" from orange before continuing with "r-a-n-g-e." This means I get a subset of "apple" results that contain "orange," as if I had typed "apple orange."
What I really want to do is clear my input on the keypress for the "o" in "orange" before hiding nonmatching elements, so I'm effectively searching the whole page for "orange."
What I've tried so far
1: Set input value to '' on select event:
$('.myinput').on('select', function(){
$(this).val('');
});
This doesn't work because it just deletes my highlighted text, which is unexpected. I only want to reset the input on the keypress following the highlight.
2: Include an if statement in my input event that checks if there is a selection within the input:
$('.myinput').on('input', function(){
var highlightedText = window.getSelection();
if($(highlightedText).parent('.myinput')) {
//reset my input
}
});
This doesn't work because it seems to fire on every keypress, regardless of if there is any actual selection. (Are user inputs always treated as selected?)
3: Add a select event listener to the input element, and set a variable to true if there's a selection. Then, in my input event, check if the variable is true on keypress.
$(function(){
var highlightedText = false;
$('.myinput').on('input', function(){
if(highlightedText = true) {
//reset my input
}
//do stuff
highlightedText = false;
});
$('.myinput').on('select', function(){
highlightedText = true;
});
});
I really thought this one would work because a basic console log in the select function only fires when I want it to – when text in the input is highlighted, but not when other text is highlighted and not when text is entered into the input. But alas, when I change that to a variable toggle, it seems to fire on every keypress again.
So the question is: How can I fire a function on input only if text in my input is highlighted?
I have found this question that suggests binding to the mouseup event, but it seems like overkill to check every single click when I'm only worried about a pretty particular situation. Also, that solution relies on window.getSelection(), which so far isn't working for me.
I've also found another question that suggests to use window.selectionEnd instead of window.getSelection() since I'm working with a text input. I tried incorporating that into option 2 above, but it also seems to fire on every keypress, rather than on highlight.
This answer is not about text selection at all.
But still solve your problem to refilter text when highlighted text is being replaced with new input.
var input = document.getElementById('ok');
var character = document.getElementById('char');
var previousCount = 0;
var currentCount = 0;
input.addEventListener('input', function(){
currentCount = this.value.length;
if (currentCount <= previousCount){
/*
This will detect if you replace the highlighted text into new text.
You can redo the filter here.
*/
console.log('Highlighted text replaced with: ' + this.value);
}
previousCount = currentCount;
char.innerHTML = this.value;
});
<input type="text" id="ok">
<div id="char"></div>
I'll agree with others that you will save yourself some trouble if you change your filtering strategy - I'd say you should filter all content from scratch at each keypress, as opposed to filtering successively the content that remains.
Anyway, to solve your immediate problem, I think you can just get the selection and see if it is empty. You can modify your second attempt:
$('.myinput').on('input', function(){
// get the string representation of the selection
var highlightedText = window.getSelection().toString();
if(highlightedText.length) {
//reset my input
}
});
EDIT
As this solution seems to have various problems, I can suggest another, along the lines of the comment from #Bee157. You can save the old search string and check if the new one has the old as a substring (and if not, reset the display).
var oldSearch = '';
$('.myinput').on('input', function(){
var newSearch = $('.myinput').val();
if (newSearch.indexOf(oldSearch) == -1) {
// reset the display
console.log('RESET');
}
oldSearch = newSearch;
// filter the results...
});
This approach has the added benefit that old results will reappear when you backspace. I tried it in your codepen, and I was able to log 'RESET' at all the appropriate moments.
Basically I need to create a textarea that is character limited, but will have a single word at the beginning, that they can't change.
It needs to be a part of the textarea, but I don't want users to be able to remove it or edit it.
I was thinking I could create a JQuery function using blur() to prevent the user from backspacing, but I also need to prevent them from selecting that word and deleting it.
UPDATE
I wrote this JQuery which seems to work great! However I like the solution below as it requires no Javascript.
<script type="text/javascript">
var $el = $("textarea#message_create_body");
$el.data('oldVal', $el.val());
$el.bind('keydown keyup keypress', function () {
var header = "Header: ";
var $this = $(this);
$this.data('newVal', $this.val());
var newValue = $this.data("newVal");
var oldValue = $this.data("oldVal");
// Check to make sure header not removed
if (!(newValue.substr(0, header.length) === header)) {
$(this).val(oldValue);
} else {
$(this).data('oldVal', $(this).val());
}
});
</script>
If you just want the textarea to show a prefix, you can use a label, change the position, and indent the textarea content. User will not notice the difference.
You can see how it works here: http://jsfiddle.net/FLEA3/.
How about just putting this word as a label next to the textbox? It may be confusing for the users not to be able to edit part of the text in the textbox.
Wouldn't it be better if you just alert the user that whatever he inputs in the textarea will be submitted with a "prefix" and then
show the prefix as a label before the textarea
add the prefix to the inputted text before submitting