<input type="text" class="home" value="google.com" onblur="if(this.value=='')
{this.value='google.com'}" onfocus="if(this.value=='google.com'){this.value=''}" />
This is my input. It has two event onblur and onfocus. I want to apply different styling rules for different events. For example: style="color:black;" for onfocus and style="color:red;" for onblur.
How would I accomplish this?
I would suggest a pure CSS solution - it's much simpler and much cleaner!
HTML
<input type="text" class="home" value="google.com" />
CSS
.home:focus {
color:red;
}
Once the control loses focus, it will return to it's original state automatically. Or, automagically as I like to say.
Here's a working fiddle.
Additional Information
See The dynamic pseudo-classes: :hover, :active, and :focus
You won't even need to use Javascript for this one. CSS has a focus pseudo-class that you can use for your input field.
input.home { color: black }
input.home:focus { color: red }
The "onblur" state just becomes the default input class selector.
<input type="text" class="home" value="google.com"
onblur="if(this.value==''){this.value='google.com'; this.style.color = 'red'}"
onfocus="if(this.value=='google.com'){this.value=''; this.style.color = 'black'}" />
However, I would recommend James Hill's solution.
Related
Apparently a disabled <input> is not handled by any event
Is there a way to work around this issue ?
<input type="text" disabled="disabled" name="test" value="test" />
$(':input').click(function () {
$(this).removeAttr('disabled');
})
Here, I need to click on the input to enable it. But if I don't activate it, the input should not be posted.
Disabled elements don't fire mouse events. Most browsers will propagate an event originating from the disabled element up the DOM tree, so event handlers could be placed on container elements. However, Firefox doesn't exhibit this behaviour, it just does nothing at all when you click on a disabled element.
I can't think of a better solution but, for complete cross browser compatibility, you could place an element in front of the disabled input and catch the click on that element. Here's an example of what I mean:
<div style="display:inline-block; position:relative;">
<input type="text" disabled />
<div style="position:absolute; left:0; right:0; top:0; bottom:0;"></div>
</div>
jq:
$("div > div").click(function (evt) {
$(this).hide().prev("input[disabled]").prop("disabled", false).focus();
});
Example: http://jsfiddle.net/RXqAm/170/ (updated to use jQuery 1.7 with prop instead of attr).
Disabled elements "eat" clicks in some browsers - they neither respond to them, nor allow them to be captured by event handlers anywhere on either the element or any of its containers.
IMHO the simplest, cleanest way to "fix" this (if you do in fact need to capture clicks on disabled elements like the OP does) is just to add the following CSS to your page:
input[disabled] {pointer-events:none}
This will make any clicks on a disabled input fall through to the parent element, where you can capture them normally. (If you have several disabled inputs, you might want to put each into an individual container of its own, if they aren't already laid out that way - an extra <span> or a <div>, say - just to make it easy to distinguish which disabled input was clicked).
The downside is that this trick unfortunately won't works for older browsers that don't support the pointer-events CSS property. (It should work from IE 11, FF v3.6, Chrome v4): caniuse.com/#search=pointer-events
If you need to support older browsers, you'll need to use one of the other answers!
Maybe you could make the field readonly and on submit disable all readonly fields
$(".myform").submit(function(e) {
$("input[readonly]").prop("disabled", true);
});
and the input (+ script) should be
<input type="text" readonly="readonly" name="test" value="test" />
$('input[readonly]').click(function () {
$(this).removeAttr('readonly');
});
A live example:
$(".myform").submit(function(e) {
$("input[readonly]").prop("disabled", true);
e.preventDefault();
});
$('.reset').click(function () {
$("input[readonly]").prop("disabled", false);
})
$('input[readonly]').click(function () {
$(this).removeAttr('readonly');
})
input[readonly] {
color: gray;
border-color: currentColor;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form class="myform">
<input readonly="readonly" value="test" />
<input readonly="readonly" value="test" />
<input readonly="readonly" value="test" />
<input readonly="readonly" value="test" />
<input readonly="readonly" value="test" />
<input readonly="readonly" value="test" />
<input readonly="readonly" value="test" />
<input readonly="readonly" value="test" />
<input readonly="readonly" value="test" />
<button>Submit</button>
<button class="reset" type="button">Reset</button>
</form>
I would suggest an alternative - use CSS:
input.disabled {
user-select : none;
-moz-user-select : none;
-webkit-user-select : none;
color: gray;
cursor: pointer;
}
instead of the disabled attribute. Then, you can add your own CSS attributes to simulate a disabled input, but with more control.
$(function() {
$("input:disabled").closest("div").click(function() {
$(this).find("input:disabled").attr("disabled", false).focus();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<div>
<input type="text" disabled />
</div>
Instead of disabled, you could consider using readonly. With some extra CSS you can style the input so it looks like an disabled field.
There is actually another problem. The event change only triggers when the element looses focus, which is not logic considering an disabled field. Probably you are pushing data into this field from another call. To make this work you can use the event 'bind'.
$('form').bind('change', 'input', function () {
console.log('Do your thing.');
});
OR do this with jQuery and CSS!
$('input.disabled').attr('ignore','true').css({
'pointer-events':'none',
'color': 'gray'
});
This way you make the element look disabled and no pointer events will fire, yet it allows propagation and if submitted you can use the attribute 'ignore' to ignore it.
We had today a problem like this, but we didn't wanted to change the HTML. So we used mouseenter event to achieve that
var doThingsOnClick = function() {
// your click function here
};
$(document).on({
'mouseenter': function () {
$(this).removeAttr('disabled').bind('click', doThingsOnClick);
},
'mouseleave': function () {
$(this).unbind('click', doThingsOnClick).attr('disabled', 'disabled');
},
}, 'input.disabled');
I did something very similar the Andy E; except I used a surrounding tag. However, I needed the 'name' so I changed it to an tag without the 'href'.
There is no reason you can't simulate the disabled attribute using a combination of CSS and readonly:
Faux-Disabled: <input type="text" value="1" readonly="1" style="background-color:#F6F6F6;"><br>
Real-Disabled: <input type="text" disabled="true" value="1"></input>
Note: This will not have the regular behavior of disabled in the <form>, which prevents the server from seeing the field. This is just in case you want to disable a field that doesn't matter server-side.
I find another solution:
<input type="text" class="disabled" name="test" value="test" />
Class "disabled" immitate disabled element by opacity:
<style type="text/css">
input.disabled {
opacity: 0.5;
}
</style>
And then cancel the event if element is disabled and remove class:
$(document).on('click','input.disabled',function(event) {
event.preventDefault();
$(this).removeClass('disabled');
});
suggestion here looks like a good candidate for this question as well
Performing click event on a disabled element? Javascript jQuery
jQuery('input#submit').click(function(e) {
if ( something ) {
return false;
}
});
I don't know if this is possible or not and hence here's the part. Suppose I have an input tag like the following.
<input id="expiry" name="expiry" type="text" placeholder="MM/YY">
Now what I want is that the user should already see the '/' part, i.e when he types 1212, the textbox should become 12/12 automatically, can it be done if yes , how. Thanks in advance.
For an HTML/CSS-only approach, you could use two inputs, and style them with no borders on the inside edges:
<input type="text" maxlength="2">
<span> / </span>
<input type="text" maxlength="2">
With the input and span elements set to display: inline-block; and some styling of borders, this is a strong, semantic approach with no required Javascript.
Recently I found a plugin that looks nice and I think it does what you're after, so I'm sharing it with you: cleave.js
<input id="expiry" name="expiry" type="text" placeholder="MM/YY">
<script type="text/javascript">
$("#expiry").bind('keyup mouseup', function () {
if($('#expiry').val().length ==2){
$('#expiry').val($('#expiry').val()+'/');
}
});
</script>
check the fiddle
try to use jquery mask plugin :
$(document).ready(function(){
$('#expiry').mask('00/00');
});
I need to have an onclick event on an <input> tag which is disabled.
Here onclick event doesn't work.
Is there any other way to work with onclick event for disabled input based on id?
I tried the code below.
First input worked but I need worked same as second one also same as of first one. (I need to call function Clicked on input only).
My code:
function Clicked(event)
{
alert(event.id)
}
function ClickedDisabled(event)
{
alert(event.ids)
}
<input type="text" id="ID" onclick="Clicked(this)" />
<input type="text" id="IDs" onclick="ClickedDisabled(this)" disabled />
function Clicked(event) {
alert(event.id)
}
function ClickedDisabled(event) {
alert(event.id)
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<input type="text" id="ID" onclick="Clicked(this)" />
<span style="position:relative;">
<input type="text" id="IDs" disabled />
<div style="position:absolute; left:0; right:0; top:0; bottom:0; cursor: pointer;" id="IDs" onclick="ClickedDisabled(this)"></div>
</span>
Try this it may help you
Put
input[disabled] {pointer-events:none}
in your CSS (it prevents some browsers from discarding clicks on disabled inputs altogether), and capture the click on a parent element. It's a cleaner solution, IMHO, than putting a transparent overlay over the element to capture the click, and depending on circumstances may also be much easier than simply "simulating" the disabled state using CSS (since that won't prevent the input from being submitted, and also requires overriding the default browser 'disabled' style).
If you have multiple such buttons, you'll need a unique parent for each, in order to be able to distinguish which button was clicked, because with pointer-events:none, the click target is the button's parent rather than the button itself. (Or you could test the click coordinates, I suppose...).
If you need to support older browsers, though, do check which ones support pointer-events: http://caniuse.com/#search=pointer-events
I think what I am trying to achieve can be done in a simpler manner. However I have little JS experience and none in the way of CSS. So I’m utilizing prebuilt CSS and JS code and subtlety modifying it. So I will explain my end goal and see if what I currently have is acceptable.
A top menu on the webpage that has push buttons and checkboxes that all visually look the same
I would like checkboxes to look like buttons, e.g. no checkbox only the label.
I would like for the checkbox to still retain its functionality as a checkbox given the JS code it is calling
Is the way I’m calling the JS code through the button and checkbox correct or too complicated?
JSFiddle
<li><a title="Zoom to U.S" input type="button" name="US" onclick="US();"><span>Zoom to U.S.</span></a></li>
<li><a title="Test 1 KML"><input type="checkbox" id="kml-red-check" name="kml-red-check" onclick="toggleKml("red");"><span>Test 1 KML</span></a></li>
.hidden {
position: absolute;
visibility: hidden;
opacity: 0;
}
input[type=checkbox]+label {
color: #ccc;
font-style: italic;
}
input[type=checkbox]:checked+label {
color: #f00;
font-style: normal;
}
<input type="checkbox" class="hidden" name="cb" id="cb">
<label for="cb">text</label>
http://css-tricks.com/almanac/selectors/c/checked/
Won't work on lt IE9 though.
edit: Following your markup it should be something like this:
<ul>
<li><input id="cb1" name="cb1-name" type="checkbox" onkeypress="setTimeout('checkIt(\'cb1\')',100);"><label for="cb1" onclick="setTimeout('checkIt(\'cb1\')',100);">text 1</label></li>
<li><input id="cb2" name="cb2-name" type="checkbox" onkeypress="setTimeout('checkIt(\'cb2\')',100);"><label for="cb2" onclick="setTimeout('checkIt(\'cb2\')',100);">text 2</label></li>
</ul>
And then check if the checkbox is checked or not in your function.
onchange / onclick in a checkbox doesn't work in IE
edited again: changed NAME attribute so you won't end up having problems further along the line. And added a little workaround for the unresponsive, though ultimately desired, onchange functionality in IE8. Eventually you should add a timer to your function, rather than inline.
function checkIt(e){
if(document.getElementById(e).checked){
alert('checked');
} else {
alert('unchecked');
}
}
It is not possible to change the appearence of a checkbox so radically using CSS.
What you CAN do though, is style a label element enough to make it look like a button. Due to the nature of the label element, clicking it will toggle the state of the checkbox keeping your functionality intact.
Here is how to do it
Markup
<li>
<label for="kml-red-check">I am a button!</label>
<input type="checkbox" id="kml-red-check" name="kml-red-check" onchange="toggleKml("red");">
</li>
Note that I've changed the onclick handler to onchange since now it is impossible to click the checkbox itself. Its value changes though when you click on the label
Styling
label[for="kml-red-check"]{
//Your CSS goes that makes the label look like a button goes here
}
#kml-red-check{
display:none;
}
<label>
<input type="checkbox" ng-model="vm.abc" ng-change="vm.go()"/>
<span>this is button add some css to lokking like a button</span>
</label>
this will work like button , if you don't want to show checkbox use this
<label>
<input type="checkbox" ng-model="vm.abc" ng-change=vm.go()" hidden=''/>
<span>this is button add some css to lokking like a button</span>
</label>
check it out here https://jsfiddle.net/h0ntpwqk/2/
I have the following html code. When clicking on the label it toggles the checkbox.
<td><label for="startClientFromWebEnabled">Client Launch From Web:</label></td>
<td><input type="checkbox" id="startClientFromWebEnabled" name="startClientFromWebEnabled" data-bind="checked: StartClientFromWebEnabled, enable: IsEditable" onchange="startClientFromWebToggleRequiredAttribute()" /></td>
How can I prevent this? If I remove the for="startClientFromWebEnabled", It stops toggling but I need this because I have some logic that takes the id from the element that fires the event ...
The best solution would be to let label toggle the checkbox as that is intuitive and expected behaviour.
Second best solution is to make sure your checkbox is not nested inside label and label does not have for attribute. If you have some logic that depends on it, you can put data attributes on elements and use those in your logic.
<input type="checkbox" data-myid="1" />
<label data-myid="1">foo</label>
Last resort
You could prevent the default behaviour of the click event using jQuery:
$('label[for="startClientFromWebEnabled"]').click(function(e) {
e.preventDefault();
});
Please see this jsFiddle for an example.
There is CSS solution too:
label {
pointer-events: none;
cursor: default;
}
if you are using JQuery, add an id on your label then
add this in your script:
$("#lbl").click(function(){
return false;
});
Just prevent default on label or any part of label, if desired.
document.querySelector('.prevent-default').addEventListener('click', (e)=>{
e.preventDefault();
}, false);
<input type="checkbox" id="1" />
<label class="prevent-default" for="1">foo</label>
or
document.querySelector('.prevent-default').addEventListener('click', (e)=>{
e.preventDefault();
}, false);
<input type="checkbox" id="1" />
<label for="1">foo some part <span class="prevent-default">not</span> clickable</label>
"I have some logic that takes the id from the element "
You could remove the for-attribute, if you store the ID somewhere else. For example in a data-*-attribute:
<label data-input-id="startClientFromWebEnabled">
On the other hand, it is sometimes difficult to point and click an a check-box based on the styling and the capabilities of the user. There is are good reasons for using the for-attribute.