Archive

Posts Tagged ‘input’

HTML5 speech input

July 12th, 2013 No comments

Adding speech input to your webapp is much easier than it might first seem.
This is part of the proposed HTML5 enhancements to FORMS and is already implmented in some browsers.

Google Chrome (WebKit 534.24) added this in version 11 in April 2011.

XHTML compatible example:
<input type="text" x-webkit-speech="x-webkit-speech" speech="speech" value="" />

NOTE:
In this example, ‘x-webkit-speech’ is the proprietary attribute used by Google Chrome (WebKit). ‘speech’ is the expected HTML5 attribute when it is finalized.

REFERENCES:

HTML5 INPUT placeholder text

November 14th, 2011 No comments

One of the great improvements for forms in HTML5 is the ability to display placeholder text in your INPUT fields. Traditionally, this has required developers to add a variety of JavaScript methods to dynamically update the field, now (for browsers that support it) you can use a simple attribute on your tag elements.

OLD:
<input type="text" value="Search" onfocus="if(this.value == 'Search'){this.value = '';}" onblur="if(this.value == ''){this.value = 'Search';}" />

NEW:
<input type="text" value="" placeholder="Search" />

REFERENCES:

META Tag ‘MSThemeCompatible’

March 31st, 2010 No comments

Okay, so this one’s a little old, and I just found it while looking at some of Microsoft Update’s HTML source, it appears to be relevant for MSIE6 and newer and may be responsible for some interesting styling and behaviour of form components.

A quick search for it turns up lots of discussions about other browers such as Firefox being effected if the value is not defined… as such it’s likely a good idea to define it in your pages to be sure.

An old MSDN entry reads…

When running on Windows XP, Internet Explorer 6 and the content displayed in it sports a look and feel that matches the Windows XP platform. You can opt to have your HTML content not take on the same look as the operating system for elements such as buttons and scroll bars, by adding the following META tag:
<meta http-equiv="MSThemeCompatible" content="no" />

Setting this will disable theme support for the document. Some background on this, Windows XP (MSIE6) allows for the use of themes for the operating system to change the general color scheme of many elements.
As such, many HTML components (such as SELECT dropdowns, BUTTONS and INPUT fields ‘MAY’ also be effected if you don’t explicitly prevent it in your code.

There was some support for this in Mozilla Firefox builds for Windows, as such, while I’d normally recommend using a conditional comment, I’m torn in this case.

Cheers

Single FORM INPUT causes submit on Enter/Return

September 10th, 2007 No comments

This is a browser oddity that I’ve had to code around for years.  In most modern browsers (currently Mozilla Firefox 2.x and MSIE 7.0), when a FORM contains only one editable INPUT field pressing the Enter or Return key will automatically submit the form, but when there are more than one the form is not submitted.   This irregularity in the single field case is responsible for several odd errors, and often results in double-submits of form data to the server.

Here’s a newer solution to the problem, the ‘magic’ is in the javascript events that we’ve added to the FORM object itself, no longer do you have to place event handlers on every INPUT field as has often been done in the past.

NOTE: not completely valid XHTML for ease of documentation and readability.

<html>
<head>
<title>test of input submit</title>
<script type=”text/javascript”>
function keycheckForm(formObj,evt){
if(isEnter(evt)){
//alert(‘in form’);
if(checkFormInputs(formObj)){
formObj.submit();
}
}
}
/*
* Added to handle enter key press
* NOTE: this is based on  a ‘legacy’ function [checkEnter(e)] that returned the reverse boolean values.
* @param evt Event
* @return boolean
*/
function isEnter(evt){ //e is event object passed from function invocation
var characterCode; //literal character code will be stored in this variable
if(evt && evt.which){ //if which property of event object is supported (NN4)
characterCode = evt.which; //character code is contained in NN4’s which property
}else{
characterCode = evt.keyCode; //character code is contained in IE’s keyCode property
}
var rc = false;
if(characterCode == 13){ //if generated character code is equal to ascii 13 (if enter key)
rc = true;
}
return rc;
}
/**
* @param formObj Object
*/
function checkFormInputs(formObj){
var rc = false;
var allInputs=formObj.getElementsByTagName(‘INPUT’);
var formInputs = allInputs.length;
var textInputs=0;
if(formInputs>1){
var ct = allInputs.length;
var i;
for(i=0; i < ct; i++){
var inputObj = allInputs[i];
var typ = inputObj.type;
if ((typ==’text’) || (typ==’password’)) {
textInputs=textInputs+1;
}
}
if(textInputs>1){
rc=true;
}
}
if(rc==false){
//alert(“blocked because of size”);
}
return rc;
}
</script>
</head>
<body>
<form action=”example.php” method=”get” onkeypress=”return keycheckForm(this,event);” onsubmit=”return checkFormInputs(this);”>
<input type=”text” name=”textfield1″ value=”testing1″ />
<button type=”button” name=”mybutton” onclick=”this.form.submit();”>Click Me</button>
</form>
</body>
</html>

Cheers!

Auto focus ‘first visible’ form field on page…

July 5th, 2006 No comments

Occassionally there comes a need to set the focus within a web page to the first ‘visible’ form field, here’s the most convenient I’ve found thus far…

Implementation:
1. Add the following Javascript to the HEAD section of your page.

function formfocus() {
if(document.forms.length > 0)
{
var formElements = ["text", "checkbox", "radio", "select-one", "select-multiple", "textarea"];
var form = document.forms[document.forms.length-1];
for (var j = 0; j < form.elements.length; j++)
{
var field = form.elements[j];
for(var x = 0; x < formElements.length; x++)
{
if (field.getAttribute("type") == formElements[x])
{
field.focus();
return false;
}
}
}
}
}

2. Add the function call to the BODY tag…

<body onload="formfocus();">

That’s it! Enjoy!

Adding ‘drop shadows’ to your HTML INPUT fields with CSS

March 2nd, 2006 No comments

Eventually there comes a time when either you, or your client(s) want you to make your HTML <form>’s sexier… one of the simplest approaches you can take is the addition of a ‘drop-shadow’ to the ‘text’ entry box. One new image and some simple CSS and you’re done!

For the purposes of this article, lets use the image i have here (INPUT white background).

Now for the CSS….
If you’re doing this inline it’ll cause you less trouble if you have a large site and only want this in a few locations.
<input type="text" style="background:#fff url(/images/input_white.png);" value="" />

Now… if you want to put this in an external CSS file you could add a ‘class’ or ‘id’ to this &input> tag, as follows…
<style type="text/css">
input#shadowclass { background:#fff url(/images/input_white.png); }
input.shadowid { background:#fff url(/images/input_white.png); }
</style>
<input type="text" class="shadowclass" name="x1" value="" />
<input type="text" id="shadowid" name="x2" value="" />

NOTE: There are better ways to do the above, but i showed the above to make the implementation obvious.

Now, we can stick the above in an external CSS and use some more specificity to prevent other problems that we’ll elaborate on…

PROBLEM…
If you assign the CSS to the <input> tag itself, you’ll get the undesired background on your CHECKBOX, RADIO, and SUBMIT input types.
The fix… either use a ‘class’ for the cases where you want to apply this style… alternately, apply a ‘class’ for the cases that you don’t want this style.
Future (not well supported currently)… use the ‘type’ in you CSS definition, like so..
input[type='text'] { background:#fff url(/images/input_white.png); }
NOTE: there’s a method in MSIE to use the ‘expression’ concept in your CSS, but i advocate ‘standards’ here, so we won’t delve any further into that topic other than to say it ‘exists’!

So here’s our final approach/recommendation for ‘current’ browsers (in our designs)… you’ll get the shadow ONLY on ‘text’ and ‘password’ input fields and not on the others…

<style type="text/css">
input { background:#fff url(/images/input_white.png); }
input#noshadow { background:transparent; }
</style>
<input type="text" name="x" value="" />
<input type="password" name="p" value="" />
<input type="radio" class="noshadow" name="r" value="" />
<input type="checkbox" class="noshadow" name="c" value="" />
<input type="submit" class="noshadow" name="s" value="" />

WARNING: the background image we use in the example above is only 200px wide, if your text field is larger than that you’ll need to account for it in some way! (otherwise you’ll get a tiled background or run out of ‘shadow’)

More advice…

  1. You can also apply this technique to <textarea> using a similar approach!
  2. This may also be a useful way to indicate ‘errors’, ‘required fields’ or ‘passwords’ in a Rich UI.
Categories: WebStandards, Work Tags: , , , , ,