I am trying to select multiple text boxes at once and initiate the copy to clipboard command but only the 3rd text field always gets highlighted or selected.
HTML:
<input type="text" class="copyText" placeholder="Name"><br>
<input type="text" class="copyText" laceholder="Phone"><br>
<input type="text" class="copyText" placeholder="E-Mail"><br>
<button>Copy</button>
JS:
$('button').on('click', function () {
var copyText = $(':input[type="text"]';
copyText.select();
document.execCommand('copy');
alert('Text Copied');
});
This way is more like a hack, but works, because we have to create an element and hide it with position:absolute;left:-1000px. The idea is to iterate over inputs and save the values into an array, then we have to store those values into a new input that is not visible. And finally we select the value of that input.
$('button').on('click', function() {
var values = $('.copyText').map(function(i, e) {
return $(e).val();
}).get();
var phantom = document.createElement("textarea");
phantom.setAttribute("style", "position:absolute;left:-1000px");
phantom.innerHTML = values.join("\n");
document.body.appendChild(phantom);
phantom.select();
document.execCommand('copy');
alert('Text Copied');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" class="copyText" placeholder="Name"><br>
<input type="text" class="copyText" laceholder="Phone"><br>
<input type="text" class="copyText" placeholder="E-Mail"><br>
<button>Copy</button>
Use each() function of jQuery
$('button').on('click', function () {
$(':input[type="text"]').each(function( index ){
$(this).select();
document.execCommand('copy');
alert('Text Copied');
});
});
Doc jQuery : https://api.jquery.com/each/
Related
I am trying to iterate through some input elements and replace their values if empty.
$(document).ready(function() {
var input = $('.test').val();
var isValid;
$("input").each(function (){
var element = $(this);
if (element.val() == "") {
$('.test').val('empty');
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<input class="test" type="text">
<input class="test" type="text">
<input class="test" type="text">
<input class="test" type="text">
<input class="test" type="text" value="test">
I want to change if a value is empty to "empty", but if it's not, to keep its own value. However it is setting every input to "empty" despite the last one having its own value. Can someone help me?
Use
element.val('empty');
Instead of
$('.test').val('empty');
Because $('.test').val('empty'); is setting value empty for all element that uses class test. As you want to change the value of a specific element, use that element reference instead of $('.test').
Here is your code with that little modification.
$(document).ready(function() {
var input = $('.test').val();
var isValid;
$("input").each(function (){
var element = $(this);
if (element.val() == "") {
element.val('empty');
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<input class="test" type="text">
<input class="test" type="text">
<input class="test" type="text">
<input class="test" type="text">
<input class="test" type="text" value="test">
Hi you can check the attribute value and it should work.
$(document).ready(function() {
var input = $('.test').val();
var isValid;
$("input").each(function (){
var element = $(this);
if (element.attr('value') == "") {
$('.test').val('empty');
}
});
I have three simple texts and I want to make a validation on "onblur" of the second text. It should delete the content just typed and keep focusing on the same input. I can make it delete the content, but it doesn't focus. What could be happening?
function validate() {
document.getElementById("txt-second").value = "";
document.getElementById("txt-second").focus();
}
<input type="text" id="txt-first" />
<input type="text" id="txt-second" onblur="validate();" />
<input type="text" id="txt-third" />
Strange that onblur doesn't work for me either.
<input type="text" id="txt-first"/>
<input type="text" id="txt-second"/>
<input type="text" id="txt-third"/>
<script>
function validate(event){
this.value = "";
this.focus();
}
var txtSeconds = document.getElementById("txt-second");
txtSeconds.onblur = validate;
</script>
Create a 'parent' function that has subroutines
<script>
var ele = document.getElementById("txt-second");
ele.onblur = function(){
ele.value="";
ele.focus();
}
</script>
If that doesnt work out, checkout this question Two onblur for same input id
Edit: I just tested your code out and it worked for me, problem is once it focuses I can't get the cursor out of that input box...
I have a situation like the one below:
var value = document.getElementById("value").value;
if (value = 'a') {
('.setting').append('<input type="text" name="name" placeholder="carname">');
}
elseif(value = 'b') {
('.setting').append('<input type="text" name="name" placeholder="fruitname">');
}
$(document).ready(function() {
$("input[name=name]").keyup(function() {
alert("The text has been changed.");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" name="username" placeholder="your name">
<select id="value"></select>
<div class="setting"></div>
The problem I have is that when I change the input the alert does not trigger. Does anyone know were am I messing up?
You're trying to select an input whose name property is "name", but the value you set in your HTML is name="username".
$(document).ready(function(){
$("input[name='username']").keyup(function(){
alert("The text has been changed.");
});
});
A better way yet is to give your input a unique id and select by that, so you don't have to use an attribute selector:
<input id="usernameInput" type="text" name="username" placeholder="your name">
$("#usernameInput").keyup(function(){ ... });
The $ is missing from ('.setting'), you should use .on to catch events of dynamically created elements and it's better to use it with classes, also use == or more likely === for conditions.
Live example
Your code modified:
<input type="text" name="name" class="example" placeholder="your name">
<select id="value"></select>
<div class="setting"></div>
<script>
var value = document.getElementById("value").value;
if(value==='a'){
$('.setting').append('<input type="text" name="name" class="example" placeholder="carname">');
}
else if(value==='b'){
$('.setting').append('<input type="text" name="name" class="example" placeholder="fruitname">');
}
</script>
<script>
$(document).ready(function(){
$('body').on('keyup', '.example', function() {
alert("The text has been changed.");
});
});
</script>
I have couple of input which has placeholder than whenever I focus on the input I want to get placeholder value with alert or inside a div.
my codes (example);
html
<input type="text" placeholder="Name">
<input type="text" placeholder="Phone:">
<input type="text" placeholder="Email">
and my js files:
var plchold = ('input[type=text]').attr('placeholder');
$("<div class='field-label'><p>"+plchold+"</p></div>").prependTo(".wrap-field");
But it just given me first placeholder value for all input.
I know it must be with $(this) but I don't know how :)
Try this one:
$('input[type=text]').focus(function(){
var plchold = $(this).attr('placeholder');
$("<div class='field-label'><p>"+plchold+"</p></div>").prependTo(".wrap-field");
});
you should loop through inputs to get placeholder for each one
$('input[type=text]').each(function(){
var plchold = $(this).attr('placeholder');
$("<div class='field-label'><p>"+plchold+"</p></div>").prependTo(".wrap-field");
});
You need to iterate over input elements and use iteration context this to target them in each iteration:
$('input[type=text]').each(function(){
var plchold = $(this).attr('placeholder');
$("<div class='field-label'><p>"+plchold+"</p></div>").prependTo(".wrap-field");
});
$("input[type=text]").focus(function(){
alert($(this).attr('placeholder'));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" placeholder="Name">
<input type="text" placeholder="Phone:">
<input type="text" placeholder="Email">
stopping my function on javascript
By using this I can add unlimited inputs on my page. But the issue is in my case, I have an input field but it may or may not have a child or sub input field and if then it should be associated with the parent input field.
Also parent input field is must for sub input fields.
Question?
Dynamic input fields(got from above),
Dynamic child/sub input fields,
How to associate child/sub input fields with parent,
So that it can save in the db with related to field.
http://jsfiddle.net/Shahbaz/WhaBx/
From this I can add multiple input fields and append multiple sub/child input fields.
which can be append.
I'll try to modify more.
$(function() {
var scntDiv = $('#p_scents');
var i = $('#p_scents label').size() + 1;
$('#addScnt').live('click', function() {
$('<p>Keyword: '+i+'Remove<br><labelfor="p_scnts"><input type="text" id="p_scnt" size="20" name="keyword[]" value="" placeholder="Enter Keyword" />Add Variants<a></a></label></p>').appendTo(scntDiv);
i++;
return false;
});
$('#remScnt').live('click', function() {
if( i >2 ) {
$(this).parents('p').remove();
i--;
}
return false;
});
$('#addVar').live('click', function() {
//alert();
$('<p><label for="var"><input type="text" id="p_scnt" size="20" name="p_scnt_' + i +'" value="" placeholder="Enter Vareyword" /></label> Remove Var</p>').appendTo($(this).next());
return false;
});
$('#remVar').live('click', function() {
$(this).parent('p').remove();
return false;
});
});
<h2>Add Another Input Box</h2>
<div id="p_scents">
<p>
Keyword: 1
<br/>
<label for="p_scnts"><input type="text" id="p_scnt" size="20" name="keyword[]" value="" placeholder="Enter keyword">
Add Variants
</label>
</p>
</div>
Use similar function and append under paragraph with different name,
Hope this will be helpful.
Try it.