This question already has answers here:
Copy text string on click
(10 answers)
Closed 4 years ago.
I would like to take input from a text box, concatenate its value with a string, then copy it to the clipboard.
I get stuck at .select(), because it doesn't work with the variable. I inserted the alert before .select() to check its value, but that's okay. The alerted value should be copied to the clipboard.
function copyLink() {
var siteNumber = document.getElementById("number");
var home = "http://www.website.com/site";
var link = home.concat(siteNumber.value);
alert(link);
link.select();
document.execCommand("copy");
alert("Copied the text: " + link);
}
<input type="text" id="number">
<button onclick="copyLink()">Copy input as link</button>
It seems you need to append the value to the dom to select. For that case create a hidden input and add set its value to link. Then once copied again set it to empty string.
For string concatenation you can use +
function copyLink() {
var siteNumber = document.getElementById("number");
var home = "http://www.website.com/site";
var link = home + siteNumber.value;
let _h = document.getElementById('hiddenIp');
_h.value = link
//alert(link);
_h.select();
document.execCommand("copy");
_h.value = '';
alert("Copied the text: " + link);
}
<input type="text" id="number">
<button onclick="copyLink()">Copy input as link</button>
<input type='hidden' id='hiddenIp'>
The text to copy has to be in an element in the DOM, which is what you call select on (not a string). See comments:
function copyLink() {
// Get the value
var siteNumber = document.getElementById("number").value;
// Build the link
var link = "http://www.website.com/site" + siteNumber;
// Create an input to put it in and append it to the DOM
var input = document.createElement("input");
input.value = link;
document.body.appendChild(input);
// Select and copy
input.select();
document.execCommand("copy");
// Remove the temporary input
document.body.removeChild(input);
alert("Copied the text: " + link);
}
<input type="text" id="number">
<button onclick="copyLink()">Copy input as link</button>
select() only works with elements. You need to create one.
Or you can save value temporarily in the input element.
function copyLink() {
var siteNumber = document.getElementById("number");
var home = "http://www.website.com/site";
var temp = siteNumber.value
siteNumber.value = home + temp
siteNumber.select();
document.execCommand("copy");
alert("Copied the text: " + siteNumber.value);
siteNumber.value = temp
}
<input type="text" id="number">
<button onclick="copyLink()">Copy input as link</button>
Related
I'm new to Javascript and am trying to write code for a simple greeting. The user will have an input box to type their name in to and below a button for them to click that outputs a value of "Hello {name}!". If you could help me out I would appreciate it!
You could start doing something like this:
(function() {
// Creates <input id="myTextBox" type="text" />
var textBox = document.createElement("input");
textBox.id = "myTextBox";
textBox.type = "text";
// Creates <button id="myButton" type="button">Show</button>
var btnShow = document.createElement("button");
btnShow.id = "myButton";
btnShow.type = "button";
btnShow.innerHTML = "Show";
// When you click in the button, show the message.
btnShow.onclick = function showMessage() {
alert("Hello " + textBox.value + "!");
};
// Add created elements.
document.body.appendChild(textBox);
document.body.appendChild(btnShow);
})();
You can find more information about createElement function in this site: Document.createElement().
I want to make such a box (textarea or inputtextfield) with a variable text in there and the variable depends on javascipt variable.
For example:
var a=prompt('some text');
if (a==1) {
link="www.google.com"
} else if (a==2) {
link="www.facebook.com"
}
and I have a textarea or input text field and their value in the text box can change to be either "www.google.com" or "www.facebook.com"
You can achieve it using the following:
HTML
<input type="text" id="textfield" />
<textarea id="textarea"></textarea>
USING JS ONLY
var a=prompt('some text');
var link = '';
if (a==1) {link="www.google.com";}
else if (a==2) {link="www.facebook.com";}
document.getElementById('textfield').value = link;
document.getElementById('textarea').innerText = link;
OR BY USING jQuery
var a=prompt('some text');
var link = '';
if (a==1) {link="www.google.com";}
else if (a==2) {link="www.facebook.com";}
$('#textfield').val(link);
$('#textarea').text(link);
Consider that this is your input field
<input type="text" name="link" />
To set the value to the input field, use the following jQuery code:
var a = prompt("Enter a value :");
var str = "";
var field = $('input[name=link]');
if(a===1)
str = "www.google.com");
if(a===2)
str = "www.facebook.com");
$(field).html(str);
Here is my JSFiddle: http://jsfiddle.net/kboucheron/XVq3n/15/
When I start a list of items and I click on "Clear", I would like to text input be cleared as well.I'm not able to clear the fields
<input type="text" placeholder ="Add List" id="listItem"/>
<button id="addButton">add Item</button>
<button id="clearButton">Clear Items</button>
<ul id="output"></ul>
clearButton.addEventListener("click", function(e) {
var text = document.getElementById('listItem').value;
var addItem = document.getElementById('output');
addItem.innerHTML = '';
text.value = '';
});
Just need to make this change here:
var text = document.getElementById('listItem');
You had this:
var text = document.getElementById('listItem').value;
What you are doing is getting the value of the input text, when you actually want the input element.
Also here is the updated fiddle: http://jsfiddle.net/XVq3n/16/
you are referring in your code to input's value, replace
var text = document.getElementById('listItem').value
with
var text = document.getElementById('listItem')
Ok, it's a really simple (but easy to make) error. Try this change and it should work:
clearButton.addEventListener("click", function(e) {
var text = document.getElementById('listItem');
var addItem = document.getElementById('output');
addItem.innerHTML = '';
text.value = '';
});
Basically, you did .value one too many times. Hope that helps.
<script type="text/javascript">
var i = 1;
function generateRow() {
var d=document.getElementById("div");
d.innerHTML+="<p><input type='text' name='[Post][textbox1][" + i + "]'>";
i = i + 1;
}
<?php $this->Form->input('textbox1',array(
'type' => 'textbox',
'label' => false,
'required')); ?>
<div id="div"></div>
<input type="button" value="Add" onclick="generateRow()"/>
Html For Textbox1
<div class="input textbox"><input name="data[Post][textbox1]"
required="required"type="textbox" id="PostTextbox1"/></div>
When I click on "Add" button, It generates new text box with name="[Post][textbox1][1]"
I can enter data in that box, but
Issue 1
When I again click on Add button It will reset all textbox and I have to enter those data again
Issue 2
$tbVal = $this->request->data['Post']['textbox1'];
$inn = implode(',',$tbVal);
When I use this code to implode data from textbox, it is showing only first data
Here is a working example based on the first answer and my answer:
<script type="text/javascript">
var i = 1;
function generateRow()
{
//Create an input type dynamically.
var element = document.createElement("input");
//Assign different attributes to the element.
element.setAttribute("type", "text");
element.setAttribute("value", "");
element.setAttribute("name", "data[Post][textbox][" + i + "]");
var foo = document.getElementById("fooBar");
//Append the element in page (in span).
foo.appendChild(element);
i = i + 1;
}
</script>
<form>
<div id="fooBar" class="input textbox">
<input name="data[Post][textbox][0]" required="required" type="textbox" id="PostTextbox1"/>
</div>
<input type="button" value="Add" onclick="generateRow()"/>
<input type="submit" >
</form>
<?php
print_r($_REQUEST);
?>
You have to use DOM manipulation javascript functions to not reset your text values and use proper name for the text boxes
you have reset all data in div document.getElementById("div") there for it reset all data in textbox.
try :
//Create an input type dynamically.
var element = document.createElement("input");
//Assign different attributes to the element.
element.setAttribute("type", type);
element.setAttribute("value", type);
element.setAttribute("name", type);
var foo = document.getElementById("fooBar");
//Append the element in page (in span).
foo.appendChild(element);
on button click
Regarding issue 2
This code:
d.innerHTML+="<p><input type='text' name='[Post][textbox1][" + i + "]'>";
have to be
d.innerHTML+="<p><input type='text' name='data[Post][textbox1][" + i + "]'>";
I'm trying to make multiple buttons that when clicked they add tags like <p></p> and <b></b> to a text-field. I have already figured out how to make it work like this:
<script>
function addtxt(input) {
var obj=document.getElementById(input)
obj.value+="<p></p>"
}
</script>
<input type="button" value="<p></p>" onclick="addtxt('body')">
but instead of having multiple scripts for every different button, I'd like to know if there is a way of the JS use the element value as obj.value. Is it possible?
EDIT: i found this other code online that's even better, how can i make this new code use the element value, is there any way?
function boldText(textAreaId, link)
{
var browser=navigator.appName
var b_version=navigator.appVersion
if (browser=="Microsoft Internet Explorer" && b_version>='4')
{
var str = document.selection.createRange().text;
document.getElementById(textAreaId).focus();
var sel = document.selection.createRange();
sel.text = "<b>" + str + "</b>";
return;
}
field = document.getElementById(textAreaId);
startPos = field.selectionStart;
endPos = field.selectionEnd;
before = field.value.substr(0, startPos);
selected = field.value.substr(field.selectionStart, (field.selectionEnd - field.selectionStart));
after = field.value.substr(field.selectionEnd, (field.value.length - field.selectionEnd));
field.value = before + "<b>" + selected + "</b>" + after;
}
You may pass this to your onclick handler, and then access it's value within your function:
<script>
function addtxt(input, button) {
var obj=document.getElementById(input);
obj.value+=button.value;
}
</script>
<input type="button" value="<p></p>" onclick="addtxt('body', this)">
<input type="button" value="<b></b>" onclick="addtxt('body', this)">
Here is an example with a specific div that receives the code javascript produces.
I don't recomend adding it to a div with id body, because that word is reserved for html structural elements, so I called the destination div "addHere".
Javascript
function addtxt(e) {
console.log(e)
var dest = document.getElementById("addHere");
dest.innerHTML = e.value;
}
HTML
<input type="button" value="<p>Text</p>" onclick="addtxt(this)">
<div id="addHere"></div>
fiddle here