We Keep Coding

maxlength of input tag with type=text using html5 in android webview not working

i am able to enter more than specified maxlength of input tag with type=text using html5 in android webview. when lost focus/ blur, value will be trimmed to maxlength.
for example
<input type="text" maxlength="5" id="hahaha">
value entered = abcdefghij
on blur/lostfocus value displayed = abcde.
is there anyway that restricts the user from entering more characters than maxlength rather than trimming content after user entered the content . In IOS it is working fine.

This problem probably is a bug in Android 4.1 version as you can see here 35264.
You can solve that with some Javascript:
<input type="text" maxlength="3" id="hahaha" onkeypress="if(this.value.length >= this.getAttribute('maxlength') return false;" />
or JQuery:
$(function() {
max_length = Number($("#hahaha").attr("maxlength"));
$("#hahaha").attr("onkeypress", "if(this.value.length >= max_length) return false;");
});

A bit late to the party, but as neliojrr mentioned you can correct this using javascript/jquery. However, I would be very tempted to make this much more generic:
$('input[maxlength]').on('keydown', function(event) {
var $this = $(this);
if ($this.val().length > parseInt($this.attr('maxlength'), 10)) {
event.preventDefault();
}
});

Thanks #paddybasi it worked for me. Just one small correction. keydown event doesn't seem to be working in android. So we need to change the event to "textInput".
$('input[maxlength],textarea[maxlength]').on('textInput', function (event) {
var $this = $(this);
if ($this.val().length >= parseInt($this.attr('maxlength'), 10)) {
event.preventDefault();
}
});

JS onkeydown/onkeyup - convert to jQuery keydown/keyup

I currently have some js for phone number validation that is using inline event listeners in the input field. I need to change this example so that instead of attaching the event listeners inline, I would be targeting the DOM element in jQuery and adding the event listeners. Here's a working example of what I have so far: http://jsfiddle.net/yVdgL/21/
window.mask = function (e,f){
var len = f.value.length;
var key = whichKey(e);
if((key>=47 && key<=58) || (key>=96 && key<=105))
{
if( len==1 )f.value='('+f.value
else if(len==4 )f.value=f.value+')'
else if(len==8 )f.value=f.value+'-'
else f.value=f.value;
}
}
function whichKey(e) {
var code;
if (!e) var e = window.event;
if (e.keyCode) code = e.keyCode;
else if (e.which) code = e.which;
return code
}
and
<input type="text" name="phone" id="phone" onkeydown="mask(event,this)" onkeyup="mask(event,this)" maxlength="13" />
I tried this but was unable to achieve the functionality that I need.

i have update you jsfiddle example:-
jQuery(document).ready(function(){
jQuery('#edit-phone1').keyup(function(event){
mask(event,this);
});
jQuery('#edit-phone1').keydown(function(event){
mask(event,this);
});
});
click here to see working example:-
http://jsfiddle.net/yVdgL/38/
or you can try :-
$(document).ready(function() {
$('#edit-phone1').on("keyup keydown", function(e) {
mask(e, this);
});
});
link for this is:-http://jsfiddle.net/yVdgL/56/

In older, pre-HTML5 browsers, $("#phone").keyup( function ) or keydown is definitely what you're looking for.
In HTML5 there is a new event, "input", which behaves exactly like you seem to think "change" should have behaved - in that it fires as soon as a key is pressed to enter information into a form. $("#phone").bind('input',function);

You never defined event.
jQuery('#edit-phone1').keyup(function(){
jQuery('#edit-phone1').mask(event,this); //<-- what is event?
});
just add it
Second issue is you are treating window.mask like a jQuery plugin and it is not a plugin.
jQuery('#edit-phone1').keyup(function(event){ //<-- add event here
mask(event,this);
});

How does one keep the tabkey from triggering the keyup/keydown event?

I assign the desired tags with class='ShowSave', make sure the SaveButton container is not displayed at start up, then display the SaveButton container when a keyup event occurs (data entry).
Everything works fine except the tab key also triggers a keyup event causing the SaveButton container to show when no data has changed. I tried just using $(".ShowSave").change(), but the SaveButton container only displayed after I left the field. That's not desirable.
jQuery:
$(".SaveButton").css({'display':'none'});
$("input.ShowSave").keyup*( function(){ $(".SaveButton").css({'display':'block'}); } );
HTML:
<form>
<td><input class='ShowSave' name="foo" type="text" value='foo' tabindex='1'></td><
<td class='SaveButton' ><img class='SaveImage' onClick='jsPostMe()' /></td>
</form>
Thanks ahead of time for any advice. I'm using straight jQuery with no plug-ins.

You want to test for the keycode if your keyup event. Something like this:
$("input.ShowSave").keyup(function(e){
var code = e.which;
//keycode 9 = tab
if(code == 9) {
return;
}
//do something
});
Here is a working example
This of course will mean that other keys may also be pressed that are not valid. You could also include a check for those key codes (here is a list), but it would be better if you instead tracking the original value of the textbox and then checked for a change on keyup.
Something like this (note: it makes use of data attributes):
<input data-original="old" value="old" class="ShowSave" />
$("input.ShowSave").keyup(function(e){
var original = $(this).data("original");
var newValue = $(this).val();
//check if value has changed
if(original == newValue){
$(".SaveButton").hide();
}
else{
$(".SaveButton").show();
}
});
Here is an example for this

something like this
$("input.ShowSave").keyup(function(e){
if(e.which != 9){
$(".SaveButton").css({'display':'block'});
}
});

Firefox: HTML keyUp event has no event data

The onKeyUp event is working in IE(7) and not in Firefox(4.0.1).
I have a textfield with attribute onclick="eventName();"
in the Javascript function eventName(evt). I do not have an event data, the event data is not sent by Firefox. In IE on the other hand window.event IS filled so here it works...
Both IE and Firefox reach the function just fine. Only problem is that I need the event data there.
Can anyone direct me towards a solution for this annoying problem?
Example page:
<html>
<head>
<script type="text/javascript">
function upperCase(evt) {
if (evt) {
var target = evt.target;
target.value = target.value.toUpperCase();
} else if (window.event) {
var target = window.event.srcElement;
target.value = target.value.toUpperCase();
} else alert('No event information');
}
</script>
</head>
<body>
<span>Enter your name: </span>
<input type="text" id="fname" onkeyup="upperCase()" />
</body>
</html>

IE handles events with a global. Everything else the event passed as the first argument to the function.
onkeyup="upperCase()"
You don't do anything with it in there. I'm not even sure you can — I haven't touched an intrinsic event attribute for anything but the most trivial toy in years.
Given
document.getElementById('fname').keyup = upperCase;
(or, better, using attachEvent / addEvent, the evt variable will be populated.)

To make this work in all browsers, pass the event to the function you're calling:
<input type="text" id="fname" onkeyup="upperCase(event)">
function upperCase(evt) {
if (evt) {
var target = evt.target;
target.value = target.value.toUpperCase();
} else if (window.event) {
var target = window.event.srcElement;
target.value = target.value.toUpperCase();
} else alert('No event information');
}
<input type="text" id="fname" onkeyup="upperCase(event)">
In some browsers such as IE, this works because event resolves to window.event, which always refers to the current event being handled. In other browsers (such as Firefox), this works because event is a variable that's in scope for the event handler. You can imagine the contents of the onkeyup attribute as being the body of a function that looks like
function(event) {
// Attribute value here
}

You forgot to actually pass the event as parameter, should be:
<input type="text" id="fname" onkeyup="upperCase(event)" />

Capture javascript event in IE Mobile

I need to detect the id of the element that generated an onchange event.
This code work in most modern browsers:
<input type="text" onchange="return onchange_handler(event);"
function onchange_handler(event) {
var id = event.target ? event.target.id : event.srcElement.id;
...
return false;
}
But it does not work in IE Mobile.
I have tried the following code, and at least the event is fired and the handler function is called, but window.event is not available when event handler is called:
<input type="text" onchange="return onchange_handler();"
function onchange_handler() {
var event = window.event; // <= evaluated as UNDEFINED
var id = event.target ? event.target.id : event.srcElement.id;
...
return false;
}
Is there any way to obtain a reference to the fired event? Or an alternative approach to know the id of the element that caused the event.

A workaround would be to pass the element to the callback: (untested)
<input type="text" id="mytextbox" onchange="return onchange_handler(this);"
function onchange_handler(element) {
var id = element.id;
...
return false;
}