When I click on the button to copy the first time I get blank
and the second time I get the the last time I click on the button
and on the alert I also get alot of black space before the #emp_ext#.
Why is it reacting this way?
Im only would like it to work on IE9.
<SCRIPT LANGUAGE="JavaScript">
function ClipBoard(areatocopy)
{
alert (holdtext.innerText);
holdtext.innerText = areatocopy.innerText;
Copied = holdtext.createTextRange();
Copied.execCommand("Copy");
}
</SCRIPT>
<TEXTAREA ID="holdtext" STYLE="display:none;">
</TEXTAREA>
<cfif #Left(getAllDetails.emp_ext, 4)# eq '4643'>
<div class="buttons">#emp_ext#
<BUTTON onClick="ClipBoard(z#emp_ext#);"> <img src="copy-icon.png" alt=""/> </BUTTON>
<pre id="z#emp_ext#" style=" display:none">
#emp_ext#
</pre>
</div>
<cfelseif #Left(getAllDetails.emp_ext, 1)# eq '5'>
<div class="buttons">655-emp_ext#
<BUTTON onClick="ClipBoard(z#emp_ext#);"> <img src="copy-icon.png" alt=""/> </BUTTON>
<pre id="z#emp_ext#" style=" display:none">
#emp_ext#
</pre>
</div>
<cfelse #Left(getAllDetails.emp_ext, 1)# eq '6'>
<div class="buttons">#emp_ext#
<BUTTON onClick="ClipBoard(z#emp_ext#);"> <img src="copy-icon.png" alt=""/> </BUTTON>
<pre id="z#emp_ext#" style=" display:none">
#emp_ext#
</pre>
</div>
</cfif>
Temporarily display the textarea before calling execCommand():
function copyText(valueToCopy)
{
var holdtext = document.getElementById("holdtext");
holdtext.innerText = valueToCopy;
var range = holdtext.createTextRange();
holdtext.style.display = "block";
range.execCommand("Copy");
holdtext.style.display = "none";
}
<textarea id="holdtext" style="display:none;"></textarea>
<div class="buttons">
<button onclick="copyText('abc');">⧉ abc</button>
<button onclick="copyText('123');">⧉ 123</button>
</div>
<div>
Paste here to test if it worked:
</div>
<div>
<textarea></textarea>
</div>
Related
I have this code, for some reason when I try to access it with a link (http://127.0.0.1:5501/111.html?textarea=2&p=2) the textarea part remains the same, I'm probably doing something wrong, but I'm not sure how to fix it.
When I open the link I want to see textarea 2 and p 2 visible, the rest should be hidden.
Here is the code in case someone from the forum can help:
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="stylechat.css">
<meta charset="UTF-8">
<title>Support</title>
<meta http-equiv="Content-Type">
</head>
<body data-new-gr-c-s-check-loaded="14.1022.0" data-gr-ext-installed="">
<!-- nav -->
<div class="navbar">
<div class="container">
<a class="logo" href="./index.html">Ho<span>me</span></a>
</div>
</div>
<!-- nav -->
<!-- info -->
<div class="textinfo">
<p class="menus" id="dsk1"><span>AAA:</span><br>
One:<br><br>
1. test<br>
2. test<br></p>
</div>
<div class="textinfo">
<p class="menus" id="dsk2"><span>AAA:</span><br>
Two:<br><br>
1. test<br>
2. test<br></p>
</div>
<!-- info -->
<!-- text -->
<div class="textniz">
<textarea id="myInput1" class="one" name="myInput1" readonly>
One
One
One</textarea>
</div>
<div class="textniz">
<textarea id="myInput2" class="two" name="myInput2" readonly>
Two
Two
Two</textarea>
</div>
<div class="textniz">
<textarea id="myInput3" class="three" name="myInput3" readonly>
Three
Three
Three</textarea>
</div>
<div class="textniz">
<textarea id="myInput4" class="four" name="myInput4" readonly>
Four
Four
Four</textarea>
</div>
<div class="textniz">
<textarea id="myInput5" class="five" name="myInput5" readonly>
Five
Five
Five</textarea>
</div>
<div class="textniz">
<textarea id="myInput6" class="six" name="myInput6" readonly>
Six
Six
Six</textarea>
</div>
<div class="textniz">
<textarea id="myInput7" class="seven" name="myInput7" readonly>
Seven
Seven
Seven</textarea>
</div>
<div class="textniz">
<textarea id="myInput8" class="eight" name="myInput8" readonly>
Eight
Eight
Eight</textarea>
</div>
<!-- text -->
<!-- scr -->
<div class="scrn" id="scrn">
<img src="/Screenshot_1.png" alt="" class="image1"></img>
<img src="/Screenshot_2.png" alt="" class="image2"></img>
<img src="/Screenshot_3.png" alt="" class="image3"></img>
<img src="/Screenshot_5.png" alt="" class="image4"></img>
</div>
<!-- scr -->
<!-- button -->
<button onclick="showscr(1)" id="scr1" class="scron1"></button>
<button onclick="showscr(2)" id="scr2" class="scron2"></button>
<button onclick="Copytextfunction(1)" id="menucopy1" class="menucopy1"></button>
<button onclick="Copytextfunction(2)" id="menucopy2" class="menucopy2"></button>
<button onclick="Copytextfunction(3)" id="menucopy3" class="menucopy3"></button>
<button onclick="Copytextfunction(4)" id="menucopy4" class="menucopy4"></button>
<button onclick="Copytextfunction(5)" id="menucopy5" class="menucopy5"></button>
<button onclick="Copytextfunction(6)" id="menucopy6" class="menucopy6"></button>
<button onclick="Copytextfunction(7)" id="menucopy7" class="menucopy7"></button>
<button onclick="Copytextfunction(8)" id="menucopy8" class="menucopy8"></button>
</div>
<!-- button -->
<!-- script -->
<script>
// Get textarea from url parameters
const urlParams = new URLSearchParams(window.location.search);
let textarea = urlParams.get('textarea')
function show(textarea) {
for (let check = 1; check <= 8; check++) {
document.getElementById('myInput' + check).style.display = "none";
document.getElementById('menucopy' + check).style.display = "none";
}
document.getElementById('myInput' + textarea).style.display = "block";
document.getElementById('menucopy' + textarea).style.display = "block";
}
let p = urlParams.get('p')
function show(p) {
for (let check = 1; check <= 2; check++) {
document.getElementById('dsk' + check).style.display = "none";
document.getElementById('dsk' + check).style.display = "none";
}
document.getElementById('dsk' + p).style.display = "block";
document.getElementById('dsk' + p).style.display = "block";
}
function Copytextfunction(textarea) {
var value = document.getElementById('myInput' + textarea).value;
var copyText = document.createElement("textarea");
copyText.value = value;
copyText.style.position = "fixed";
copyText.style.top = "-1000vh";
document.body.append(copyText);
copyText.select();
copyText.setSelectionRange(0, 99999)
document.execCommand("copy");
console.log(value);
copyText.remove();
}
// Run the hide function with the textarea number from parameters
if (textarea) {
show(textarea);
}
if (p) {
show(p);
}
</script>
<!-- script -->
</body>
Created 3 dynamic divs(sea_p,sea_p_div,div_btns), inside the third(div_btns) created 2 buttons
how can i change the text inside these dynamic buttons before adding to body?
let div = $(`<div class="Search_div"></div>`)
let p = $(`
<div class="sea_p">
<div class="sea_p_div">
<div class="p_img">
<img src="" alt="" width="80" />
<div class="div_span">
<span class="p_name"></span>
<span class="p_surname"></span>
</div>
</div>
<div class="div_btns">
<button class="req_btn req_check1" data-id="">Text1</button>
<button class="req_btn req_check2" data-id="">Text2</button>
</div>
</div>
</div>`)
div.append(p)
//change text here
$('body').append(div)
let div = $(`<div class="Search_div"></div>`)
let p = $(`
<div class="sea_p">
<div class="sea_p_div">
<div class="p_img">
<img src="" alt="" width="80" />
<div class="div_span">
<span class="p_name"></span>
<span class="p_surname"></span>
</div>
</div>
<div class="div_btns">
<button class="req_btn req_check1" data-id="">Text1</button>
<button class="req_btn req_check2" data-id="">Text2</button>
</div>
</div>
</div>`)
div.append(p)
//change text here
p.find(".req_check1").html('New Text');
p.find(".req_check2").html('New Text 2');
$('body').append(div)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
Please try this.
window.onload = function() {
$(".req_check1").html('New Text');
$(".req_check2").html('New Text 2');
}
Thank you.
You can use text() method of jQuery, on the jQuery object of button whose text you want to change.
NOTE : Use it just after appending the p tag to the body.
var buttonWrap = $('.sea_p .div_btns button');
buttonWrap.eq(0).text("Text for button 1");
buttonWrap.eq(1).text("Text for button 2");
I've tried several things for days... so i whittled this down to save time...
I want to click the CopyQQ button, and have the url... ex https://www.TestURL.com/pt/595564 copied into a var. see code below...
I realize that I need to somehow use the e.target, but beyond that, (as a newby to js), I'm just now quite sure how to grab the url field that i need...
<!doctype html>
<head>
This is head<br>
</head>
<body>
This is body<br>
<form>
<div class=thelist>
<ul>
<l>
<br>
<div class="fj43">
<button class="fjCopyTxtButton" onclick="copyURL()">
CopyQQ
</button>
https://www.TestURL.com/pt/595564
</div>
<br>
</l>
<l>
<br>
<div class="fj43">
<button class="fjCopyTxtButton" onclick="copyURL()">
CopyQQ
</button>
https://www.TestURL.com/pt/222222
</div>
<br>
</l>
<l>
<br>
<div class="fj43">
<button class="fjCopyTxtButton" onclick="copyURL()">
CopyQQ
</button>
https://www.TestURL.com/pt/333333
</div>
<br>
</l>
</ul>
</div>
</form>
<script type="text/javascript">
function copyURL(e) {
event.preventDefault();
var aa = event.target.innerText
console.log(aa)
}
</script>
</body>
</html>
to get the URL, you need to read the content of the parent of event.target, this is done with parentElement, then remove the text of the button from it, using string.substring
function copyURL(e) {
event.preventDefault();
// get ALL the parent text, even button content
const parentText = event.target.parentElement.innerText
const buttonText = event.target.innerText
// remove the text of the button from the parent text
const url = parentText.substring(buttonText.length + 1)
console.log(url)
}
<div class="fj43">
<button class="fjCopyTxtButton" onclick="copyURL()">
CopyQQ
</button>
https://www.TestURL.com/pt/595564
</div>
<div class="fj43">
<button class="fjCopyTxtButton" onclick="copyURL()">
CopyQQ
</button>
https://www.TestURL.com/pt/222222
</div>
<div class="fj43">
<button class="fjCopyTxtButton" onclick="copyURL()">
CopyQQ
</button>
https://www.TestURL.com/pt/333333
</div>
I have a DIV with links in it. When a link is clicked I wish to replace div in place with a form. When users need to return 'home' to original div they should simply click 'go back' or similar.
Here's what I've tried with no prevail:
HTML
<div id="wrapper" class="toggled">
<div class="container" id="init">
<div class="link-1">
<a class="first" href="#">1st Action</a>
</div>
<div class="link-2">
<a class="second" href="#">2nd Action</a>
</div>
<div class="link-3">
<a class="third" href="#">3rd Action</a>
</div>
</div>
</div>
<div class="container" id="one" style="display:none;">
<input type="button" value="Go Back" id="home"/> One
</div>
<div class="container" id="two" style="display:none;">
<input type="button" value="Go Back" id="home"/> Two
</div>
<div class="container" id="three" style="display:none;">
<input type="button" value="Go Back" id="home"/> Three
</div>
Javascript
var originalState = $("#init").clone();
$(".first").click(function() {
$("#init").replaceWith($("#one"));
});
$(".second").click(function() {
$("#init").replaceWith($("#two"));
});
$(".third").click(function() {
$("#init").replaceWith($("#three"));
});
$("#home").click(function() {
$(<current state>).replaceWith($(originalState));
});
Where I would like to replace div (id="init") with the corresponding selected div (id="one",id="two", or id="three").
Furthermore user need to return to original div (id="init") upon clicking 'go back button'
Here is a Fiddle.
This is a basic solution with javascript (no jQuery) hope it helps you and solves the problem.
const initDiv = document.getElementById('init');
const classList = ["first" , "second" ,"third"];
const inputClassList = ['one' ,'two' ,'three'];
let linkIndex = -1;
initDiv.addEventListener('click' , showInput);
function showInput(e){
let linkIndex = classList.indexOf(e.target.classList[0]);
if(linkIndex >= 0){
const inputDiv = document.getElementById(inputClassList[linkIndex]);
const inputButton = inputDiv.children[0];
inputDiv.classList.remove('noDisplay');;
initDiv.classList.add('noDisplay');
inputButton.addEventListener('click' ,function(){
initDiv.classList.remove('noDisplay');
inputDiv.classList.add('noDisplay');
})
}
}
#wrapper{
background-color: #999;
}
.noDisplay{
display:none;
}
.inputCss{
/*set here the css properties you don't want the input to
enherit from wrapper div*/
}
<div id="wrapper" class="toggled">
<div class="container" id="init">
<div class="link-1">
<a class="first" href="#">1st Action</a>
</div>
<div class="link-2">
<a class="second" href="#">2nd Action</a>
</div>
<div class="link-3">
<a class="third" href="#">3rd Action</a>
</div>
</div>
<div class="container noDisplay inputCss" id="one">
<input type="button" value="Go Back" id="home1"/> One
</div>
<div class="container noDisplay inputCss" id="two">
<input type="button" value="Go Back" id="home2"/> Two
</div>
<div class="container noDisplay inputCss" id="three">
<input type="button" value="Go Back" id="home3"/> Three
</div>
</div>
This solution is using jQuery.
The .replaceWith() method removes content from the DOM and inserts new content in its place with a single call.
So you can just modify the css display value.
var originalState = $("#init").clone();
$(".first").click(function() {
toggleDisplay("init" ,"one");
$("input").click(function() {
toggleDisplay("one" ,"init");
});
});
$(".second").click(function() {
toggleDisplay("init" ,"two");
$("input").click(function() {
toggleDisplay("two" ,"init");
});
});
$(".third").click(function() {
toggleDisplay("init" ,"three");
$("input").click(function() {
toggleDisplay("three" ,"init");
});
});
function toggleDisplay(first ,second) {
$(`#${first}`).hide();
$(`#${second}`).show();
}
#wrapper{
background-color: #999;
}
.inputCss{
/*set here the css properties you don't want the input to
enherit from wrapper div*/
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="wrapper" class="toggled">
<div class="container" id="init">
<div class="link-1">
<a class="first" href="#">1st Action</a>
</div>
<div class="link-2">
<a class="second" href="#">2nd Action</a>
</div>
<div class="link-3">
<a class="third" href="#">3rd Action</a>
</div>
</div>
<div class="container inputCss" id="one" style="display:none;">
<input type="button" value="Go Back" id="home1"/> One
</div>
<div class="container inputCss" id="two" style="display:none;">
<input type="button" value="Go Back" id="home2"/> Two
</div>
<div class="container inputCss" id="three" style="display:none;">
<input type="button" value="Go Back" id="home3"/> Three
</div>
</div>
This solution meets all functional requirements including browser history support. In other words, pressing the back or forward buttons work as expected.
See this fiddle. To test history controls, host the page locally. The full source is attached below.
The key challenge is to not change the DOM or event bindings more than needed. The replace and clone operations are expensive and have weird edge behaviors. Usually it is better to hide and show elements and set event bindings as few times as possible.
The solution below does all this. Let me know if you have questions. Good luck!
<html>
<head></head>
<body>
<div id="wrapper" class="toggled">
<div class="container" id="init">
<div class="link-1">
<a class="first" href="#">1st Action</a>
</div>
<div class="link-2">
<a class="second" href="#">2nd Action</a>
</div>
<div class="link-3">
<a class="third" href="#">3rd Action</a>
</div>
</div>
</div>
<div class="container" id="one" style="display:none;">
<input type="button" value="Go Back" class="home"/> One
</div>
<div class="container" id="two" style="display:none;">
<input type="button" value="Go Back" class="home"/> Two
</div>
<div class="container" id="three" style="display:none;">
<input type="button" value="Go Back" class="home"/> Three
</div>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
(function () {
var
allowList = [ '', 'first', 'second', 'third' ],
doDebounce = false
;
$('.first').click(function( event_obj ) {
$('#init').hide();
$('#one').show();
doDebounce = true;
document.location.hash = 'first';
event_obj.preventDefault();
});
$('.second').click(function( event_obj ) {
$('#init').hide();
$('#two').show();
doDebounce = true;
document.location.hash = 'second';
event_obj.preventDefault();
});
$('.third').click(function( event_obj ) {
$('#init').hide();
$('#three').show();
doDebounce = true;
document.location.hash = 'third';
event_obj.preventDefault();
});
$('.home').click(function( event_obj ) {
$('.container').hide();
$('#init').show();
doDebounce = true;
document.location.hash = '';
event_obj.preventDefault();
});
$( window ).on( 'hashchange', function () {
var
page_str = document.location.hash || '',
selector_str = ''
;
if ( page_str.length > 0 ) { page_str = page_str.substr( 1 ); }
if ( allowList.indexOf( page_str ) === -1 ) { return; }
if ( doDebounce ) {
doDebounce = false;
return;
}
selector_str = page_str ? '.' + page_str : '.home';
$( selector_str ).trigger( 'click' );
doDebounce = false;
});
}());
</script>
</html>
i've a little javascript that let me show and hide some textareas.
i start with 1 textarea shown and the other 4 hidden with property display:none;
the first textarea is shown correct, but when i run the javascipt to hide thhe first and show one of the other textareas, the cols property is not readed and the textarea is shown small.
Here is the js code:
<script language="javascript">
function collapser(tab_id) {
document.getElementById("new_page_content_it").style.display = "none";
document.getElementById("new_page_content_en").style.display = "none";
document.getElementById("new_page_content_fr").style.display = "none";
document.getElementById("new_page_content_es").style.display = "none";
document.getElementById("new_page_content_de").style.display = "none";
document.getElementById(tab_id).style.display = "block";
}
</script>
And here there is the html:
<div id="new_page_tab_container">
<a href="#" OnClick="javascript:collapser('new_page_content_it')">
<div id="new_page_tab_it">Italian</div>
</a>
<a href="#" OnClick="javascript:collapser('new_page_content_en')">
<div id="new_page_tab_en">English</div>
</a>
<a href="#" OnClick="javascript:collapser('new_page_content_fr')">
<div id="new_page_tab_fr">French</div>
</a>
<a href="#" OnClick="javascript:collapser('new_page_content_es')">
<div id="new_page_tab_es">Spanish</div>
</a>
<a href="#" OnClick="javascript:collapser('new_page_content_de')">
<div id="new_page_tab_de">German</div>
</a>
</div>
<div id="new_page_content_it">
<textarea name="content_it" id="content_it" cols="90" rows="40">italian</textarea>
</div>
<div id="new_page_content_en">
<textarea name="content_en" id="content_en" cols="90" rows="40">english</textarea>
</div>
<div id="new_page_content_fr">
<textarea name="content_fr" id="content_fr" cols="90" rows="40">french</textarea>
</div>
<div id="new_page_content_es">
<textarea name="content_es" id="content_es" cols="90" rows="40">spanish</textarea>
</div>
<div id="new_page_content_de">
<textarea name="content_de" id="content_de" cols="90" rows="40">german</textarea>
</div>
<div id="new_page_save">
<input type="submit" value="Salva"/>
</div>
The css define content_it visible but any other content_xx as display:none;
why the cols property is not readed? but most important... how to get rid of this problem?
Thanks!
As a start I would recommend you to validate your HTML. For instance you have div elements (block elements) inside anchor elements (inline elements) which is not valid. If you use Firefox I can recommend this HTML validator plugin:
http://users.skynet.be/mgueury/mozilla/