jQuery .select() inside .live() does not work on IE7 and IE8 - javascript

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();
}
});
})

Related

Why is this my jQuery keypress() event not working?

I have a text box
<input id="textinput" type="text" name="text_input" value=""/>
and a properly linked (did a console.log in the document ready function and it worked) jquery file
$(document).ready(function()
{
console.log("hi");
});
$( '#textinput' ).keypress(function() {
var tag_text = $('#textinput').val();
console.log("key pressed");
});
As far as I can tell, I'm doing everything properly. However, I am obviously not doing something right.
My goal is to make it so that whenever a letter/character (or any key, really) is pressed with focus on the textinput textbox, an event will trigger.
What am I doing wrong here?
Put the keypress function inside the $(document).ready() function:
$(document).ready(function() {
console.log("hi");
$( '#textinput' ).keypress(function() {
var tag_text = $(this).val();
console.log("key pressed");
});
});
JSFiddle
Try binding the keypress event in the $(document).ready() function. Your code works as intended.
$(document).ready(function() {
$( '#textinput' ).keypress(function() {
var tag_text = $('#textinput').val();
console.log("key pressed");
});
});

Triggering datepicker from function doesnt work

I use a pickadate.js plugin.
What i would like to do is to trigger a date container after checkbox is checked, but it somehow doesn't work. I assume it has to do something with out of the scope variables since it works just fine outside the checkbox event function.
Official documentation:
See here and also here
JS:
var pick = $('#chosen').pickadate({format:'dd.mm.yyyy'});
var picker = pick.pickadate('picker');
//picker.open();
// it works here
$(":checkbox").change(function() {
if(this.checked) {
picker.open();
// it doesnt work here
event.stopPropagation();
console.log('checkbox triggers!');
}
});
JSFIDDLE
Use .on() with click. (like (.on("event", fn)))
$(":checkbox").on('click', function () {
if (this.checked) {
picker.open();
event.stopPropagation();
}
});
Fiddle
I used trigger method and now I think it works as intended:
$( "input[type=checkbox]" ).on( "click", function(){
$(":checkbox").trigger("change");
} );
Fiddle

jQuery mouseenter/leave

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>");
});
});

How to perform .select() on jQuery masked text input

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");

jQuery .click() is triggering when selecting/highlighting text

I have a <div> with a bunch of text in it. This <div> also has a .click() event on it using jQuery.
The problem I'm having is that the .click() is being triggered when selecting/highlighting text. Even holding the mouse down for several seconds before releasing.
Here is a JSFiddle that shows the issue: http://jsfiddle.net/ym5JX/
The behavior that I would expect is that highlighting text isn't the same as clicking on the element.
That's because a click is a mousedown followed by a mouseup. My suggestion is to check getSelection inside the click handler. If it's set, then you selected something, else you just clicked.
$('#click').click(function() {
var sel = getSelection().toString();
if(!sel){
alert("clicked");
}
});​
DEMO: http://jsfiddle.net/ym5JX/3/
As I posted on comment, mosuedown + mouseup = click which is exactly what highlighting does. There is workaround for this.. see below,
var isClick = 0;
$('#click').click(function() {
if (isClick == 1) {
alert("clicked");
}
}).mousedown(function () {
isClick = 1;
}).mousemove(function () {
isClick = 0;
});
DEMO
jsFiddle: http://jsfiddle.net/ym5JX/8/
$('#click').click( function()
{
if ( getSelection() == "" )
{
alert("clicked");
}
});

Categories

Resources