I'm having trouble to convert all lower case to upper case in a text box:
<body>
<input type="text" id="input_1" class="allcaps"/>
<input type="text" id="input_2" class="allcaps"/>
</body>
$(document).ready(function () {
//trigger ng event
$('.alcaps').live("keyup", function () {
var fin = $('.alcaps').val();
$('.alcaps').val(fin.toUpperCase());
});
});
The first input box transforms its contents to capitals, but the text I put in the first box is also copied to the second input...
When using the class as selector you're selecting all input boxes with that class and setting the value to the same as the first one. Use the this keyword to target only the current textbox :
$(document).ready(function() {
$(document).on('keyup', '.alcaps', function() {
var fin = this.value;
this.value = fin.toUpperCase();
});
});
FIDDLE
You can use this which refers to your current input, also note than live is deprecated, you can use on instead:
$(document).on("keyup", ".alcaps", function () {
this.value = this.value.toUpperCase()
});
User this inside the handler:
$('.alcaps').live("keyup", function () {
var fin = $(this).val();
$(this).val(fin.toUpperCase());
});
Related
I want to change a input text size when I change its value.
I have this javascript:
jQuery(document).ready(function ($) {
function resizeInput() {
$(this).attr('size', $(this).val().length);
}
$('input[type="text"]')
// event handler
.keyup(resizeInput)
// resize on page load
.each(resizeInput);
document.getElementById("uploadBtn").onchange = function ()
{
document.getElementById("uploadFile").value = this.value;
$("#uploadFile").attr('size', $("#uploadFile").val().length);
};
});
First, I have test $('input[type="text"]') with resizeInput function. But it doesn't work.
Next, I have added that function to document.getElementById("uploadBtn").onchange = function () but it also doesn't work.
I want to resize input field uploadFile when I do this:
document.getElementById("uploadFile").value = this.value;
How can I auto-scale an input size when I assign it a new string? Now it is autoscaling but it changes input's size with string characters count, and this is not what do I want to do.
I have used this SO answer as inspiration.
I have added this JSFiddle but I'm getting an error.
Try this: change size value as per length of value entered.
$(function(){
$("input[type='text']").keyup(function(){
var value = $(this).val();
$(this).attr("size",value.length);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text">
Actually your code should work. You have define javascript function inside document.ready, just move it outside or make it jquery function.
jQuery(document).ready(function ($) {
$("input[type='text']").keyup(resizeInput);
});
function resizeInput() {
$(this).attr('size', $(this).val().length);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text">
I'm trying to fill three fields with the same text but I'm only writing into the first one. This code is only working once and then it isn't (the alert is working fine constantly).
$( 'textarea[name="posting"]' ).on( "keyup", function() {
var text = $('textarea[name="posting"]').val();
$('textarea[name="posting_twitter"]').replaceWith(text);
alert(text)
});
See the working jsfiddle:
JS:
$('#first').on('keyup', function() {
$('#second').val($(this).val());
});
HTML:
<input id="first" type="text">
<input id="second" type="text">
All you need to do is use jQuery's .val() method, which can both set and get the value of an input element. Read the documentation.
Try this:
$( 'textarea[name="posting"]' ).on( "keyup", function() {
var text = $('textarea[name="posting"]').val();
$('textarea[name="posting_twitter"]').val(text);
alert(text);
});
Text area value can be replaced with val()
$('textarea[name="posting_twitter"]').val(text)
like this?
html
<textarea name = "posting"></textarea>
<textarea name = "posting_twitter"></textarea>
jquery
$('textarea[name="posting"]').on("keyup", function(){
var text = $(this).val();
$('textarea[name="posting_twitter"]').val(text);
});
I have my markup like this
<div class="text-input-area">
<input type="text" id="text-input"/> <br />
<input id="button" type="submit" value="Preview" />
</div><!--.text-input-area-->
In the input area I will type only text. Now when I will click on button Preview it should show the text that I had type. For that I have made my jquery like this
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery('#button').click(function() {
var textvalue = $( "#text-input").text();
alert('textvalue');
});
});
</script>
But its not working at all. Can someone tell me how to do this?
demo http://jsfiddle.net/gmeEL/
API:
.val() : http://api.jquery.com/val/
Hope this will fit the cause :)
code
jQuery(document).ready(function() {
jQuery('#button').click(function() {
var textvalue = $( "#text-input").val();
alert(textvalue);
});
});
Use $( "#text-input").val() instead of $( "#text-input").text() and alert(textvalue) instead of alert('textvalue')
Complete Code:
jQuery(document).ready(function() {
jQuery('#button').click(function() {
var textvalue = $( "#text-input").val();
alert(textvalue);
});
});
Fiddle Demo
Two problems
need to use .val() to get the value of an input field
need to use the variable textvalue for the alert not a string literal 'textvalue'
Try
jQuery(function ($) {
$('#button').click(function () {
var textvalue = $("#text-input").val();
alert(textvalue);
});
});
for inputs and select use $(selector).val()
for span use $(selector).text()
It should be a val() i.e. a jquery function that returns a value of the element
var textvalue = $( "#text-input").val();
Please note that
The .text() method cannot be used on form inputs or scripts. To set or
get the text value of input or textarea elements, use the .val()
method. To get the value of a script element, use the .html() method.
http://api.jquery.com/text/
I facing problem with my jquery, on showing input text based on input value.
Here is the JS fiddle demo :
http://jsfiddle.net/Ltapp/364/
When I try to input #hotmail, the input box will show. But when I want to type some text in the #hotm input box, it will hide again.
JS code :
$(window).load(function(){
var myString = '#hotmail';
$('#hotm').hide();
$("input").keyup(function () {
var value = $(this).val();
if($(this).val().match(myString)) {
$('#hotm').show();
} else {
$('#hotm').hide();
}
});
});
It's because your selector $("input") affects both input elements. I have updated it to the $("input:first") selector instead. JsFiddle here
$("input:first").keyup(function () {
var value = $(this).val();
if(value.match(myString)) {
$('#hotm').show();
} else {
$('#hotm').hide();
}
});
As many has said, you are binding the event on all the inputs I did a little change:
$(function(){
var myString = /#hotmail/ig;
$("#check").bind('keyup checkvalue', function() {
$('#hotm')[myString.test(this.value) ? 'show' : 'hide']();
}).trigger('checkvalue');
});
using regex if you are using #HoTmAil it will also hit on that, and also added a custom event checkvalue to see if #hotm should be visible on for example a postback on the form you might be using.
demo: http://jsfiddle.net/voigtan/xjwvT/1/
You're affecting all inputs. Either give each one a unique ID / Class or use the jQuery $(this) method.
See JSFiddle Here:
http://jsfiddle.net/Ltapp/366/
<input type="text" id="firstinput"/>
<p id="secondinput"><input type="text"/></p>
var myString = '#hotmail';
$('#secondinput').hide();
$("#firstinput").keyup(function () {
var value = $(this).val();
if($(this).val().match(myString)) {
$('#secondinput').show();
} else {
$('#secondinput').hide();
}
});
use this for your if part :
if($(this).val().match($(this).val().substr(0,strlen($(this).val())))
it's because the new box also = "input"; if you give the hotmail textbox it's own id, it won't hide
<input id="hotmail" type="text"/>
and then
$("#hotmail").keyup(function () {...});
Is it possible to control where in an input typing starts on focus?
e.g.
<input type="text" value="(+44)" id="phone_number" />
I need the user's typing to begin after the existing value, but leave the option to backspace and delete.
Something like:
$(document).ready(function(){
$('#phone_number').focus(function(){
//place type start after whatever value already exists
});
});
If you want to use jQuery, you can do:
$("input").focus(function () {
var val = this.value;
var $this = $(this);
$this.val("");
setTimeout(function () {
$this.val(val);
}, 1);
});
Taken from this original answer.
DEMO
This can also help you to keep formatted input field
http://digitalbush.com/projects/masked-input-plugin/
jQuery(function($){
$("#phone_number").mask("(+44)999999");
});
I have use 9 to add only numeric values only, else you can you * to add anything