JQuery advice or suggestion for new alternative solution - javascript

Is there a better way of doing this
$("#<%=Text_Name.ClientID%>").mouseleave(function () {
var t_name = this.value;
if (t_name == "") {
$(this).val("Name");
$("#<%=Text_Name.ClientID%>").addClass("grey_add");
$("#<%=Text_Name.ClientID%>").removeClass("black_add");
}
});
What this code does is when you scroll out of the textbox it leaves the it returns to you "Name".
A con about using this technique is when user move mouse out the textbox it fills something in when user types.

It's really simple with jQuery, check this:
html
<input type="text" id="myInput" value="Name" />
jQuery
$(function() {
$('#myInput').focusin(function() {
$(this).val('');
});
$('#myInput').focusout(function() {
$(this).val('Name');
$(this).css('background-color', '#ccc');
});
});
Here goes jsFiddle.
No need for plugins or much code for this.

<input name="search" placeholder="<%=Text_Name.ClientID%>"/>
no javascript needed.

$("#<%=Text_Name.ClientID%>").blur(function () {
var t_name = this.value;
if (t_name == "") {
$(this).val("Name");
$("#<%=Text_Name.ClientID%>").addClass("grey_add");
$("#<%=Text_Name.ClientID%>").removeClass("black_add");
}
});
This event happens when you focus on something else, which is what the textbox at the top right of stack overflow probably uses.

You could look into the watermark plugin I was posting about here:
Custom jQuery plugin return val()
Just edit it to be mouseover / mouseout instead of on focus/blur.
jsFiddle edited to show mouseover/mouseout

Related

Do something after checkbox is changed JQuery

I was wondering if somebody can tell me how I can check if the checkbox status has changed. The problem is that I'm using a bootstrap theme (AdminLTE) which gives me a fancy checkbox, but I can't put a onchange or onclick on the checkbox, because I will be kind of hidden underneath the "makeup".
So I'm looking for a solution that does something on checkbox status change (true or false), while you cant "acces" the checkbox with an onclick etc. in html.
Checkbox plugin: icheck.
The code for the checkbox:
<span class="input-group-addon">
<input id="username" type="checkbox" class="minimal">
</span>
Thanks in advance (:
Edit: Most answers here will work for regular checkboxes (Might be usefull for others), but for my problem there was 1 working answer. But I'd like to thank everybody (:
Attach an event handler for ifChanged event.
$('input').on('ifChanged', function(event){
alert(event.type + ' callback');
});
You can choose the preferred event as you need, which is fired by iCheck plugin : check here.
check this example
JS
$('input:checkbox[name=example]').change(function() {
alert("Hello!");
});
HTML
<input type="checkbox" name="example" /> click me
Try this..
$(document).ready(function(){
$("#x").change(function(){
if ( $("#y").val().length == 0 )
{
$("#y").val(0);
var a = parseInt($('#x').val(), 10);
var b = parseInt($('#y').val(), 10);
$('#z').val(a+b);
}
else{
var a = parseInt($('#x').val(), 10);
var b = parseInt($('#y').val(), 10);
$('#z').val(a+b);
}
});

FocusEvent how to figure out it has been triggered through mouse or tab

I have some code which has some conditional branches if the FocusEvent has been triggered through a mouseclick outside of the input-box or if it has been tabbed out. It's pretty messy JS-Legacy code and I only have time to apply a hotfix here.
Doc for FocusEvent: https://developer.mozilla.org/en/docs/Web/API/FocusEvent
Unlike the Click event the FocusEvent does not have any informations about buttons pressed during the event triggering.
Does anybody has an idea how I can get this information? Via Google I only found workarounds - but I just can't believe that this FocusEvent has a way to receive the button pressed out of the box?
FocusEvent is clearly described as an experimental technology in the doc you linked. So what you ask may be added in the future. But for now it looks like you have no other choice but to use a workaround.
I made one to try:
var clickWhileFocused = false;
$("#testInput").on("tabbedOut", function () {
console.log("tabbedOut");
});
$("#testInput").on("clickedOut", function () {
console.log("clickedOut");
});
$(document).on("mousedown", function (e) {
if($("#testInput").is(":focus") && e.target.id != "testInput") {
$("#testInput").trigger("clickedOut");
clickWhileFocused = true;
}
});
$("#testInput").on("focusout", function () {
if(!clickWhileFocused) {
$("#testInput").trigger("tabbedOut");
}
clickWhileFocused = false;
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="text"/>
<input id="testInput" type="text" placeholder="#testInput"/>
<input type="text"/>

Jquery Show Input Text Based On Input Value

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

Maintain focus on an input tag

I'm trying to keep focus on an input element with this code:
<input onblur="this.focus()" />
But it doesn't seem to work.
If we just call .focus() right on blur event, it will restore focus, but actually there will be no text cursor. To handle this we have to let element to lose focus and then return it in few milliseconds. We can use setTimeout() for this.
$('#inp').on('blur',function () {
var blurEl = $(this);
setTimeout(function() {
blurEl.focus()
}, 10);
});
Here's working example. Be careful - you can't leave text field after you enter it =)
EDIT I used jQuery, but it can be easily done without it.
EDIT2 Here's pure JS version fiddle
<input type="text" id="elemID" />
<script type="text/javascript">
document.getElementById('elemID').onblur = function (event) {
var blurEl = this;
setTimeout(function() {
blurEl.focus()
}, 10);
};
</script>

Detect which form input has focus using JavaScript or jQuery

How do you detect which form input has focus using JavaScript or jQuery?
From within a function I want to be able to determine which form input has focus. I'd like to be able to do this in straight JavaScript and/or jQuery.
document.activeElement, it's been supported in IE for a long time and the latest versions of FF and chrome support it also. If nothing has focus, it returns the document.body object.
I am not sure if this is the most efficient way, but you could try:
var selectedInput = null;
$(function() {
$('input, textarea, select').focus(function() {
selectedInput = this;
}).blur(function(){
selectedInput = null;
});
});
If all you want to do is change the CSS for a particular form field when it gets focus, you could use the CSS ":focus" selector. For compatibility with IE6 which doesn't support this, you could use the IE7 library.
Otherwise, you could use the onfocus and onblur events.
something like:
<input type="text" onfocus="txtfocus=1" onblur="txtfocus=0" />
and then have something like this in your javascript
if (txtfocus==1)
{
//Whatever code you want to run
}
if (txtfocus==0)
{
//Something else here
}
But that would just be my way of doing it, and it might not be extremely practical if you have, say 10 inputs :)
I would do it this way: I used a function that would return a 1 if the ID of the element it was sent was one that would trigger my event, and all others would return a 0, and the "if" statement would then just fall-through and not do anything:
function getSender(field) {
switch (field.id) {
case "someID":
case "someOtherID":
return 1;
break;
default:
return 0;
}
}
function doSomething(elem) {
if (getSender(elem) == 1) {
// do your stuff
}
/* else {
// do something else
} */
}
HTML Markup:
<input id="someID" onfocus="doSomething(this)" />
<input id="someOtherID" onfocus="doSomething(this)" />
<input id="someOtherGodForsakenID" onfocus="doSomething(this)" />
The first two will do the event in doSomething, the last one won't (or will do the else clause if uncommented).
-Tom
Here's a solution for text/password/textarea (not sure if I forgot others that can get focus, but they could be easily added by modifying the if clauses... an improvement could be made on the design by putting the if's body in it's own function to determine suitable inputs that can get focus).
Assuming that you can rely on the user sporting a browser that is not pre-historic (http://www.caniuse.com/#feat=dataset):
<script>
//The selector to get the text/password/textarea input that has focus is: jQuery('[data-selected=true]')
jQuery(document).ready(function() {
jQuery('body').bind({'focusin': function(Event){
var Target = jQuery(Event.target);
if(Target.is(':text')||Target.is(':password')||Target.is('textarea'))
{
Target.attr('data-selected', 'true');
}
}, 'focusout': function(Event){
var Target = jQuery(Event.target);
if(Target.is(':text')||Target.is(':password')||Target.is('textarea'))
{
Target.attr('data-selected', 'false');
}
}});
});
</script>
For pre-historic browsers, you can use the uglier:
<script>
//The selector to get the text/password/textarea input that has focus is: jQuery('[name='+jQuery('body').data('Selected_input')+']')
jQuery(document).ready(function() {
jQuery('body').bind({'focusin': function(Event){
var Target = jQuery(Event.target);
if(Target.is(':text')||Target.is(':password')||target.is('textarea'))
{
jQuery('body').data('Selected_input', Target.attr('name'));
}
}, 'focusout': function(Event){
var Target = jQuery(Event.target);
if(Target.is(':text')||Target.is(':password')||target.is('textarea'))
{
jQuery('body').data('Selected_input', null);
}
}});
});
</script>
You only need one listener if you use event bubbling (and bind it to the document); one per form is reasonable, though:
var selectedInput = null;
$(function() {
$('form').on('focus', 'input, textarea, select', function() {
selectedInput = this;
}).on('blur', 'input, textarea, select', function() {
selectedInput = null;
});
});
(Maybe you should move the selectedInput variable to the form.)
You can use this
<input type="text" onfocus="myFunction()">
It triggers the function when the input is focused.
Try
window.getSelection().getRangeAt(0).startContainer

Categories