i m using a hyperlink here and on click event of the hyperlink i want to copy the selected text (which i have selected using the mouse pointer or highlighted text) inside the text box using the java script i want only selected text in the text box which i select or highlight from mouse pointer.my java script is working but it copy the full text of div
<li>Candidate Name </li>
<script type="text/javascript">
function Edit() {
alert("hiii");
document.getElementById('<%=txtbox.ClientID%>').value = document.getElementById('<%=divtext.ClientID%>').innerHTML;
return true;
}
</script>
<div>
<asp:TextBox ID="txtbox" runat="server"></asp:TextBox>
</div>
<div id="divtext" runat="server">
TCS Infosys Wipro HP HCL Microsoft Facebook Facebook Facebook
</div>
Try this
<!DOCTYPE html>
<html>
<script type="text/javascript">
function getSelectionText(divID) {
var selectedText = "";
if (window.getSelection) {
var sel = window.getSelection();
var div = document.getElementById(divID);
if (sel.rangeCount) {
// Get the selected range
var range = sel.getRangeAt(0);
// Check that the selection is wholly contained within the div text
if (range.commonAncestorContainer == div.firstChild) {
var selectedText = range.toString();
}
}
}
return selectedText;
}
function Edit() {
var selectedText = getSelectionText("divtext")
document.getElementById("txtbox").value = selectedText;
return true;
}
</script>
<body>
<li>Candidate Name </li>
<div>
<input type="text" ID="txtbox" />
</div>
<div id="divtext">
TCS Infosys Wipro HP HCL Microsoft Facebook Facebook Facebook
</div>
</body>
Related
I have buttons with some text in the button attribute and what I want is when I click to the button it copy to the clipboard
$('.copyboard').on('click', function(e) {
e.preventDefault();
var copyText = $(this).attr('data-text');
console.log(copyText);
copyText.text().select();
document.execCommand("copy");
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button data-text="Hello World 1" class="copyboard">Copy</button></div>
<button data-text="Hello World 2" class="copyboard">Copy</button></div>
<button data-text="Hello World 3" class="copyboard">Copy</button></div>
When I click it return this :
Uncaught TypeError: copyText.select is not a function
When you want to copy text into the clipboard, you need to select text on a textarea or an input.
The data attribute is an attribute of the tag HTML, it's not selectable.
You can make this if you put the text into a textarea, select it and remove the tag after copy.
$('.copyboard').on('click', function(e) {
e.preventDefault();
var copyText = $(this).attr('data-text');
var textarea = document.createElement("textarea");
textarea.textContent = copyText;
textarea.style.position = "fixed"; // Prevent scrolling to bottom of page in MS Edge.
document.body.appendChild(textarea);
textarea.select();
document.execCommand("copy");
document.body.removeChild(textarea);
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button data-text="Hello World 1" class="copyboard">Copy</button></div>
<button data-text="Hello World 2" class="copyboard">Copy</button></div>
<button data-text="Hello World 3" class="copyboard">Copy</button></div>
This example on w3schools shows you you need to use an text field in order to use .select() and then have it copy
Example:
<!DOCTYPE html>
<html>
<body>
<p>Click on the button to copy the text from the text field. Try to paste the text (e.g. ctrl+v) afterwards in a different window, to see the effect.</p>
<input type="text" value="Hello World" id="myInput">
<button onclick="myFunction()">Copy text</button>
<script>
function myFunction() {
var copyText = document.getElementById("myInput");
copyText.select();
document.execCommand("copy");
}
</script>
</body>
</html>
This is how you could implement it in your code:
$('.copyboard').on('click', function(e) {
e.preventDefault();
var copyText = $(this).attr('data-text');
var element = document.createElement("input");
element.type = 'text';
element.value = copyText;
element.style.position = "fixed"; // Prevent MS edge scrolling.
document.body.append(element);
element.select();
document.execCommand("copy");
document.body.removeChild(element);
})
Apparently you can only copy a visible and also an input element. Try something like:
$('.copyboard').on('click', function(e) {
e.preventDefault();
var copyText = $(this).attr('data-text');
var el = $('<input style="position: absolute; bottom: -120%" type="text" value="'+copyText+'"/>').appendTo('body');
el[0].select();
document.execCommand("copy");
el.remove();
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button data-text="Hello World 1" class="copyboard">Copy</button></div>
<button data-text="Hello World 2" class="copyboard">Copy</button></div>
<button data-text="Hello World 3" class="copyboard">Copy</button></div>
According to the docs This event is limited to <input type="text"> fields and <textarea> boxes. See jquery - select()
Similarly, The HTMLInputElement.select() method selects all the text in a <textarea> element or in an <input> element that includes a text field MDN - HTMLInputElement - select
As a workaround, you can create a temporary, invisible and un-editable input or textarea on each button click, copy the necessary text to the clipboard, and then remove the input again.
See this article.
I have a trouble with click events on ios safari. When i click on the span nothing happens first time. But when i focus on span its selected then after click events working. Can somebody explain this weird event ? or any suggestion ?
Here is my javascript:
window.selectText = function() {
$('.banks .number').on('click', function(e) {
$(this).select();
var doc = document,
text = this,
range,
selection;
if (doc.body.createTextRange) {
range = document.body.createTextRange();
range.moveToElementText(text);
range.select();
} else if (window.getSelection) {
selection = window.getSelection();
range = document.createRange();
range.selectNodeContents(text);
selection.removeAllRanges();
selection.addRange(range);
}
});
}
And html snippet:
<div class="banks">
<div class="bank-title">Хүлээн авагчийн данс</div>
<div class="bank khaan">
<div class="spacer" id="test">
<div class="logo"></div>
<span class="number">5037639120</span>
<span class="name">Хаан банк</span>
</div>
</div>
<div class="bank khas">
<div class="spacer">
<div class="logo"></div>
<span class="number">5002086050</span>
<span class="name">Хас банк</span>
</div>
</div>
</div>
And my goal is when users click on span.number its must select the texts. But i don't understand why click event not works on first click and after focusing span its selected then other click events works.
$(document).ready(function () {
jQuery(".banks").click(function () {
jQuery(".number").click(function (e) {
var se = window.getSelection();
alert(se);
//your logic can apply here
exit();
});
});
});
Well, as I was searching on the internet for some basic codes to examine - I found this one. A simple code which is supposed to copy the selected text. As i am a complete newbie in JS, I check the meaning of the methods that I didn't understand - and rewrited the code, as i make a few adjustments.
And still the code is not working and If someone can explain - this part ""copyit(this.form.select1)"" - Even though I kind of understand "this" - i am not able to understand what is doind here
function copyit(theField) {
var selectedText = document.getSelection();
if (selectedText.type == 'Text') {
var newRange = selectedText.createRange();
theField.focus();
theField.value = newRange.text;
} else {
alert('select a text in the page and then press this button');
}
}
</script>
<form name="it">
<div align="center">
<input onclick="copyit(this.form.select1)" type="button" value="Press to copy the highlighted text" name="btnCopy">
<p>
<textarea name="select1" rows="4" cols="45"></textarea>
</div>
</form>
This is the original code - and it is not working either
<SCRIPT LANGUAGE="JavaScript">
function copyit(theField) {
var selectedText = document.selection;
if (selectedText.type == 'Text') {
var newRange = selectedText.createRange();
theField.focus();
theField.value = newRange.text;
} else {
alert('select a text in the page and then press this button');
}
}
</script>
And in the body of your web page, add the following where you want the text to appear:
<form name="it">
<div align="center">
<input onclick="copyit(this.form.select1)" type="button" value="Press to copy the highlighted text" name="btnCopy">
<p>
<textarea name="select1" rows="4" cols="45"></textarea>
</div>
</form>
onclick="copyit(this.form.select1)"
executes the copyit() function and passes a variable which is later named theField. The variable that is passed is this.form.select1 which is a textarea with ID select1 which is located in the same form as the input you're clicking hence the this.form.
As to why your code isn't working - you should include here the original code before your adjustments. You probably deleted/changed something you shouldn't have.
I'm not sure what you're asking. Are you asking to, when someone clicks on any button/div, it copies a text you want for his clipboard? If no, ignore my comment, if yes, i'll explain:
First place, where should an user click?
<a class="btn" CopydivFunction(#text)">CLICK ME TO Hello.</a>
Now, add the function with JS.
function copyToClipboard(element) {
var $temp = $("<input>");
$("body").append($temp);
$temp.val($(element).text()).select();
document.execCommand("copy");
$temp.remove();
}
Now, place the text you want somebody to copy (hide it):
<h1 id="text" class="hidden">some text. This part won't be seen because of the hidden class, and this is the text that will be copied to your clipboard.</h1>
Place display:none on css:
#text{
display:none;
}
I think you have to add that, so nobody sees it.
And that should be it, click the <a> and you get the text in the h1#text
I was working on a project that I need a hidden input field to take user input.
I have javascript in place to focus always on the input field. When the div is visible I can see typing. When I hide the div type and make the div visible again I do not see any change. How can I make it so when the div is hidden, it will still take user input? Really, if there is another way besides hiding, that would be great.
<html>
<body>
<div id="diva">
<input name="geta" id="geta" type="text" onkeypress="javascript:geta.focus();" onKeyUp="javascript:geta.focus();" OnBlur="javascript:geta.focus();" OnChange="javascript:geta.focus();" />
</div>
<button onClick="javascript:change();">Show/Hide Div</button>
<script language="javascript" type="text/javascript">
<!--
function change() {
var div = document.getElementById('diva');
if (div.style.display !== 'none') {
div.style.display = 'none';
}
else {
div.style.display = 'block';
}
};
geta.focus();
// -->
</script>
</body>
</html>
Fixed copy using Jeffman's idea:
<html>
<head>
<style>
input {
position: absolute;
left: -999em;
}
</style>
</head>
<body>
<input name="geta" id="geta" type="text" onkeypress="javascript:geta.focus();" onKeyUp="javascript:geta.focus();" OnBlur="javascript:geta.focus();" OnChange="javascript:geta.focus();" />
<button onClick="javascript:show();">Show</button><button onClick="javascript:hide();">Hide</button>
<script language="javascript" type="text/javascript">
<!--
function hide() {
document.getElementById('geta').style.position = 'absolute';
document.getElementById('geta').style.left = '-999em';
}
function show() {
document.getElementById('geta').style.position = 'absolute';
document.getElementById('geta').style.left = '10em';
}
geta.focus();
// -->
</script>
</body>
</html>
Are you just trying to make it so any user input is captured to a hidden input field?
If so you can add a onkeyup trigger to the document, and for every keyup, modify the hidden input field.
Otherwise, once you have hidden an element it would loses focus.
Simple example:
I don't know if you are using jQuery, so here is a very native, simple solution, put in your head tag
document.onkeyup = function(e) {
var input = document.getElementById('myinput');
if (input.style.display == 'none') {
input.value += String.fromCharCode(e.keyCode || e.which);
}
};
I don't think it's possible to type in a text field when it's hidden. What is your use case?
I use the NicEdit(www.nicedit.com) text-editor on my Text Area which is working and the below code to hide and show text area after selecting a value in the drop down it will show the text area but this is what i need help with;
1) i want the text area to show even before you select any value from the drop down.
2) i want the Text editor(NicEdit) to show on all the text area after selecting a value from the drop down to show the text area.
Js For Text-editor(Nicedit):
<script type="text/javascript" src="js/nicEdit.js"></script>
<script type="text/javascript">
bkLib.onDomLoaded(function() {
new nicEditor({maxHeight : 200}).panelInstance('area');
});
</script>
Js to hide and show text area:
<script type="text/javascript">
function showHide()
{
if(document.getElementById("color_dropdown").selectedIndex == 1)
{
document.getElementById("hidden1").style.display = ""; // This line makes the DIV visible
}
else {
document.getElementById("hidden1").style.display = "none"; // This line hides the DIV
}
if(document.getElementById("color_dropdown").selectedIndex == 2)
{
document.getElementById("hidden2").style.display = ""; // This line makes the DIV visible
}
else {
document.getElementById("hidden2").style.display = "none"; // This line hides the DIV
}
if(document.getElementById("color_dropdown").selectedIndex == 3)
{
document.getElementById("hidden3").style.display = ""; // This line makes the DIV visible
}
else {
document.getElementById("hidden3").style.display = "none"; // This line hides the DIV
}
}
</script>
Html drop down:
<select name="menu" id="color_dropdown" onchange="showHide()">
<option>Select Meun</option>
<option>One</option>
<option>Two</option>
<option>Three</option>
</select>
<textarea id="hidden1" name="area" display:none;" id="area">ggggggggggggggggg</textarea>
<textarea id="hidden2" name="area" display:none;" id="area">hhhhhhhhhhhhhhhhh</textarea>
<textarea id="hidden3" name="area" display:none;" id="area">yyyyyyyyyyyyyyyyy</textarea>
Just a small note, you have more have multiple id attributes per text area and the second id's have the same value, this should be a class. The "display:none;" in your textareas are not in style tags(style="display:none;"), also try linking/loading the javascript at the bottom of the html page just before the the last html tag(or last body tag).
I am not sure if this will fix your problem, but these could be issues.