Develop Reference

highlight text input upon accesskey

I have an HTML page with a text input field for a search string. I would like to give focus to the field when the user hits a predefined key (like META-S).
A similar behaviour is possible for anchors in HTML 5:
CSS3
I am wondering if there is a more specific solution than to have a JS function listening to all key presses and filtering for the correct one.

You should already be using <label /> for all your form inputs (for accessibility purposes) .. <label /> can have the accesskey attribute.
Example:
<label for="search" accesskey="s">Search:</label><br />
<input type="text" id="search" width="100" />

Jquery validation on div content

I am extending the functionality of a Business Intelligence tool. This is a web based application. Currently attempting to create some type of "form" validation. The strange thing is that this application reuses the same input for every single one of the form inputs. Once the user clicks away from the input html object, some javascript moves the value entered into the input into the text within a div.
Before:
<div>
</div>
Input filled out:
<input type="text" value="this is a test">
Result:
<div>
this is a test>
</div>
Is there any way to create a listener which will validate what is written inside of the div?

try this
<input type="text" value="this is a test"/>
instead of
<input type=text value=this is a test></input>
hope this helps...

Can not show changed value to hidden field with javascript

I have a checkbox and 2 number input fields:
<input name="exercise[hold]" type="hidden" value="0"><input class="te-cb" id="exercise_hold" name="exercise[hold]" type="checkbox" value="1">
<input class="exerciseReps input-mini" id="exercise_number_of_reps_in_set" min="0" name="exercise[number_of_reps_in_set]" placeholder="Reps" type="number" style="display: none; ">
<div class="input-append te-len" style="display: inline-block; ">
<input class="exerciseLength input-mini" id="exercise_length" min="0" name="exercise[length]" placeholder="Length" type="number">
<span class="add-on">sec</span>
</div>
One input field is hidden with js:
$('.te-len').hide()
In form above there is also text input field with auto competition which gets the data with ajax (that is not relevant here). With jquery I am setting the values of input fields of form with data I got from server.
I also show hidden field if value for checkbox is true:
if data[selected].hold
$('.exerciseReps').hide()
$('.te-len').show()
and that works
Every field is set correctly accept the hidden field, that field is empty.
The weird thing is that I placed alert of that hidden field's value after it has been set and alert shows the value that should have been set but the value is not visible
$('.te-len').val( data[selected].length )
alert $('.te-len').val()
Note: the js code is actually coffescript.

I think the problem is because you are setting value to a div. Although use of val works, this function is primarily used on form elements such as input, select and textarea.
If you mean to replace the content of the div.te-len then you could use either html or text:
$('.te-len').html( data[selected].length )
But it sounds like you are trying to show data[selected].length value in the input.exerciseLength numeric field. For that you should be using:
$('#exercise_length').val( data[selected].length )

Umbraco add linked from page #nodename as text input value on form

How can I add the linked from page #nodename as a text input value on my form?
The input will disabled, so that the user cannot change the text.
<input type="text" name="jobtitle" id="jobtitle" value="Job Title to be Prefilled here by linked from page #nodeName - Disabled field" disabled="disabled" />

I assume this is razor? Try #Model.Name instead.

Tab order issue in IE with initial Javascript select of field in form

I'm trying to achieve the following behaviour in html: user is presented with a form involving several text fields. The fields are populated with default values, but in many cases the user will wish to enter their own. When the page loads, the value in the first field is selected, so the user can either replace it by simply starting to type and tabbing out to the next field, or simply leave it and tab out. Here's a pared down example of what I have:
<html>
<body onload="document.getElementById('helloField').select()">
<form>
<input id="helloField" value="hello"/><br/>
<input value="goodbye"/><br/>
<input type="submit" value="Submit"/>
</form>
</body>
</html>
This works in Chrome (and Firefox I believe, but I don't have it here). In IE, the field is selected as intended, but when the user hits tab, the browser tabs out to its address bar rather than to the goodbye field. If I replace the select with a simple focus, like
<body onload="document.getElementById('helloField').focus()">
the tabbing is okay in all browsers, but this isn't what I want. I want the user to be able to start typing right away to replace the default value.
Anyone have any ideas?
Thanks.

Focus, then select.
Also consider putting the code in a script block directly after the input in question. If you have a bunch of images on the page, document.onload can fire quite a lot later, and the last thing you want is to be typing away in an input box when onload fires and hijacks your focus (making you delete the contents of the box).
<input id="helloField" value="hello"/><br/>
<script type="text/javascript">
var hello= document.getElementById('helloField');
hello.focus();
hello.select();
</script>

Try setting the tab order of the fields using tabindex:
<html>
<body onload="document.getElementById('helloField').select()">
<form>
<input id="helloField" value="hello" tabindex="1" /><br/>
<input value="goodbye" tabindex="2" /><br/>
<input type="submit" value="Submit" tabindex="3" />
</form>
</body>
</html>