I'm using http://digitalbush.com/projects/masked-input-plugin/ plugin.
There is an input text with defined mask:
<input type="text" id="txtMyInput" class="FocusSense"/>
and a script:
$(document).ready(function () {
jQuery(function ($) {
$("#txtMyInput").mask("?9.99");
});
$(".FocusSense").focus(function () {
this.select();
});
})
As you can see, I would like select all in txtMyInput on focus but but alas!
On focus, mask appears and lose .select().
What should I do to preserve mask and .select()?
I think what you are looking for, is this :
$(document).ready(function () {
jQuery(function ($) {
$("#txtMyInput").mask("?9.99");
});
$(".FocusSense").focus(function (e) {
var that = this;
setTimeout(function(){$(that).select();},10);
return false;
});
});
setTimeout will "queue" the select() execution. So it will select the content after masking is completed.
Working Demo
you need to use $(this) to get the current object.
$(document).ready(function () {
jQuery(function ($) {
$("#txtMyInput").mask("?9.99");
});
$(".FocusSense").focus(function () {
$(this).select(); // instead of this.select();
});
});
sory change focus change click function;
jQuery(".FocusSense").click(function() {
this.focus();
this.select();
});
this.select() change jQuery(this).select();
$(".FocusSense").focus(function () {
jQuery(this).select();
});
This is duplicate of
'jQuery masked input plugin. select all content when textbox receives focus' where I posted explanation for this fix.
imeout method is unnecessary!
$(".yourMaskedInput").attr("readonly", true).select().removeAttr("readonly");
Related
Can you select an image based on id using jQuery? Because when I tried it, it didn't work. Is this the correct way? Thanks
$(document).ready(function () {
$("#imageID").click(function (){
$("#imageID").addClass("className");
});
});
This could be happening because the element is not inside the DOM when you bind the event. Then you could try to bind with jquery using on function and binding the event to body for instance:
$(document).ready(function () {
$("body").on("click", "#imageID", function (){
$(e.target).addClass("className");
});
});
First, check duplicate id's.
Better way:
$(document).ready(function () {
$("#imageID").on('click', function (){
$(this).addClass("className");
});
});
Also, it add new classname only to clicked image, not to all images, so this is right way.
Your problem may occures because you have thow or more tags with #imageID id.
So, more better way is using js-* classes:
<img src="/images/img.png" class="js-my-image" alt="">
Code:
$(document).ready(function () {
$(".js-my-image").on('click', function (){
$(this).addClass("className");
});
});
If image is added after page loads, right code:
$(document).ready(function () {
$(document).on('click', '.js-my-image', function (){
$(this).addClass("className");
});
});
or
$(document).ready(function () {
$(".js-my-image").live('click', function (){
$(this).addClass("className");
});
});
I am trying to make a simple profile linked to our company database, in which clients can log in and check their details. Basically, I need a function that will display a Save button when the edit button is clicked. As soon as I press cancel, the save button should disappear again.
I am a bit of a noob, so maybe I am missing something very simple, for which I apologise. The code and JSFiddle follow:
http://jsfiddle.net/65D9C/26/
<HTML>
<button src="#" id="littleButton">Edit Profile</button>
<div id="button-sm">
<input type="submit" class="ButtonSm" value="Save" id="save_button" name="save_button"></input>
</div>
</HTML>
<script>
$(document).ready(function () {
var SaveButton = $('#button-sm');
$(SaveButton).hide();
$('#littleButton').onclick(function (e) {
$(SaveButton).animate({
'opacity': 'toggle'
});
});
});
</script>
Working Demo : JSFiddle
It should be click event not onclick also you have to include jQuery library you can download from here jQuery 1.11.1
Try this :
$(document).ready(function () {
var SaveButton = $('#button-sm');
SaveButton.hide();
$('#littleButton').click(function (e) {
SaveButton.animate({
'opacity': 'toggle'
});
});
});
For more info about click event see jQuery click event
there is click event not onclcik
$(document).ready(function () {
var SaveButton = $('#button-sm');
SaveButton.hide();
$('#littleButton').on('click',function (e) {
SaveButton.show();
});
});
and you didn't include js in your fiddle.
DEMO
Try this : use click instead of onclick and you can use show("slow") to display show button
$(document).ready(function () {
var SaveButton = $('#button-sm');
$(SaveButton).hide();
$('#littleButton').click(function (e) {
var buttonLbl = "Edit Profile";
if($(this).text()!="Cancel")
buttonLbl="Cancel";
$(this).text(buttonLbl);
$(SaveButton).toggle('slow');
});
});
Demo
You did not include any jquery and also there is no onclick in jquery .so you have to use click event
$(document).ready(function () {
var SaveButton = $('#button-sm');
SaveButton.hide();
$('#littleButton').click(function (e) {
SaveButton.animate({
'opacity': 'toggle'
});
});
});
Updated Demo
You have several problems in your code. First of all should be click instead of onclick.
See the code:
$(document).ready(function () {
var SaveButton = $('#button-sm');
SaveButton.hide();
$('#littleButton').click(function (e) {
SaveButton.show();
});
});
Updated jsFiddle
Try this (and sorry for my awful english)
JS - section
$(document).ready(function () {
$('#littleButton').on("click", function (e) {
e.preventDefault();
$("#button-sm").fadeIn(300);
});
$('#cancelButton').on("click", function(e){
$("#button-sm").fadeOut(300);
});
});
This jQuery show your SAVE button when you click on "EDIT" button and hide you button if you click on a "CANCEL" button (with id "cancelButton")
But you have to set this in your css first of all
CSS section
#button-sm {
display:none;
}
i have a link on html
Veja aqui »</p>
and i'm using .on() to do a transition and load content from a external file
$(document).on("click", '#instalacoesbutton', function(){
$("#maincontent").slideUp(1000, function () {
$("#maincontent").load("instalacoes.html #instalacoes");
}).delay(500).slideDown(1000);
});
any idea why this doesn't work?
if i do:
$("#instalacoesbutton").on("click", function(){
$("#maincontent").slideUp(1000, function () {
$("#maincontent").load("instalacoes.html #instalacoes");
}).delay(500).slideDown(1000);
});
it works, for the 1st click, but doesn't after the page has been generated dinamically
Here you go:
jQuery:
$(document).ready(function() {
$("#instalacoesbutton").on("click", function() {
$("#maincontent").slideUp(1000, function () {
$("#maincontent").load("instalacoes.html #instalacoes");
}).delay(500).slideDown(1000);
});
});
Try it yourself on jsFiddle
If you want the action to fire on all future elements which match that selector, you can set up a click on the document and look for a clicks on that item. This would look something like:
$(document).click(function (e) {
if ($(e.target).is(".testSelector")) {
// do stuff to $(e.target)
}
});
I have this code in html:
<div class="sub-status">
<p class="subscribed"><i class="icon-check"></i> Subscribed</p>
</div>
On hover, I want that to be changed to:
<div class="sub-status">
<p class="unsubscribe"><i>X</i> Unsubscribe</p>
</div>
And, I have this code in jQuery:
$(document).ready(function() {
$('.sub-status').mouseenter(function() {
$(this).html("<p class='unsubscribe'><i>X</i> Unsubscribe</p>");
});
$('.sub-status').mouseleave(function() {
$('this').html("<p class='subscribed'><i class='icon-check'></i> Subscribed</p>");
});
});
The first function is working great. When I mouseover that div, it is changed to what I want, but the mouseleave is not working. I want that when I put my mouse out of that div, its data will return to like it was before. I can't get this working. Any help would be appreciated.
Thanks.
Change
$('this')...
to
$(this)...
And you can use hover() instead of using two separate functions:
$('.sub-status').hover(function() {
$(this).html("<p class='unsubscribe'><i>X</i> Unsubscribe</p>");
},function() {
$(this).html("<p class='subscribed'><i class='icon-check'></i> Subscribed</p>");
});
Updated
Your fiddle isn't working since you are updating the entire content of the hovered element - update just the text in <p> should work.
$('.sub-status').hover(function() {
$(this).children('p')
.removeClass()
.addClass('unsubscribed')
.html("<i>X</i> Unsubscribe");
},function() {
$(this).children('p')
.removeClass()
.addClass('subscribed')
.html("<i class='icon-check'></i> Subscribed");
});
Working fiddle
Here, try this. Working demo: http://jsfiddle.net/XrYj4/3/
$(document).ready(function() {
$('.sub-status').on("mouseenter", function() {
$(this).find("p").prop("class", "unsubscribed").html("<i>X</i> Unsubscribe");
}).on("mouseleave", function() {
$(this).find("p").prop("class", "subscribed").html("<i class='icon-check'></i> Subscribed");
});
});
Try to use a hover function:
$(".sub-status").hover(
function () {
$(this).html("<p class='unsubscribe'><i>X</i> Unsubscribe</p>");
},
function () {
$(this).html("<p class='subscribed'><i class='icon-check'></i> Subscribed</p>");
}
);
http://api.jquery.com/hover/
Change 'this' to simply this. Also consider chaining, shown below, this helps users with weaker devices load stuff faster.
$(document).ready(function() {
$('.sub-status').mouseenter(function() {
$(this).html("<p class='unsubscribe'><i>X</i> Unsubscribe</p>");
}).mouseleave(function() {
$(this).html("<p class='subscribed'><i class='icon-check'></i> Subscribed</p>");
});
});
jQuery(document).ready(function($) {
$('input[type="text"]').live('focus', function() {
if (this.value == 'someValue') {
this.select();
}
});
});
The same result with .delegate() and .on().
What am I missing?
Any help is appreciated.
Works fine for me using .on. Perhaps you want it to select the text when you click?
$("form").on("click", ":text", function(){
if ( $(this).val() === "someValue" ) {
$(this).select();
}
});
Fiddle: http://jsfiddle.net/jonathansampson/nfKm7/
It kind of does work, the text just becomes deselected as soon as it has been selected when using the focus event
Using on() and an event other than focus seems to work better
see this fiddle
DEMO: http://jsfiddle.net/hjgZ3/
remove $ from function($)
<input type="text" value="someValue" />
$(function(){
$('input[type="text"]').live('focus', function() {
if (this.value == 'someValue') {
alert('hi');
//this.select();
}
});
})