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" />
Related
I am trying to use Pattern attribute to do validation on text box.
When ever user entered any of these .....i want to show some validation message.
So i created that element as follows:
<input type="text" pattern="/(<!|&#|<\?|<|>)/" title="Required" required />
When ever i entered any text it is showing the alert...
How to get rid of this?
You were using the wrong pattern. In HTML patterns, you don't need an opening and closing delimiter. Also, the browser checks, if the entered text MATCHES the pattern, but you would need the exact opposite (if I understood it correctly). Try something like this:
<form>
<input type="text" pattern="^((?!(<)|(<!)|(<\?)|(&#)|(>)).)*$" title="Required" required />
<input type="submit" />
</form>
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...
I tried the following but it returns two pieces of data to the server. This is a problem for my gateway, and I get an error.
I used this for one of my attempts:
<script type="text/javascript">
if( $('#other).is('):selected') )
{
// user wants to enter own value
$('[name="installments"]").not('[type="text"]').attr('name', '') // remove all
values apart from the entered text.
}
</script>
<body>
<FORM ACTION="http://www.cs.tut.fi/cgi-bin/run/~jkorpela/echo.cgi" METHOD="POST">
<br><br>
<input type="radio" name="installments" id="r1" checked="checked" value="99">
Open-Ended - I can stop them via email at any time.<br>
<label for="installments">number of payments</label><br>
<input type="radio" name="installments" id="other" value="Enter Custom.."><br>
<input type="text" name="installments" value="" maxlength="4" size="4">
<br><br><br>
<input type="submit" name="btnSubmit" value="Submit" />
</form>
This returns either -
installments 99
installments (empty)
or
installments Enter Custom..
installments 5
I can only have one return for the var 'installments' either 99 or the number they imputed.
I have tried various ways of doing this using JS and allowing the user to make a choice with the same results - two instances of the var 'installments' being sent.
Is there a javascript way to test the input field and if a number is entered then disable using id(s) the extra radio button so it can't send any data? Or is there a better way to do this?
Solved
I found the answer & Here it is
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
$('#user_input').change(function() {
$('#use_user_input').val($(this).val());
});
});
</script>
And Html Here:
Total number of payments...</span><br>
<input type="radio" name="installments" checked value="99">
Open-Ended -
<input id="use_user_input" type="radio" name="installments" value="">
limited number of payments -
<input id="user_input" type="text" value="" maxlength="4" size="4"></span>
You would want to give the input text field a different name from the radio inputs, then handle the text field's POST as a separate variable from the radio buttons in the HTTP request. Also, give the second radio input a value, such as "other" so you know to handle the associated text input.
If you only have the ability to receive one field from the form you will need to alter the form as the user fills it in. Currently the form works if the user selects one of the values delimited by the radio buttons. The problem, I gather, is that the status of the radio buttons overrides the value of the text field even if the user selects the "other" option of filling in the text box.
The solution is to use a script that is triggered when the user changes the content of the text box. This script will read the value of the text box and assign that value to the 'other' radio button.
We can do this using the onchange event:
<input id="otherRadio" type="radio" name="installments" value="" /><br />
<input id="otherText" type="text" value="" maxlength="4" size="4" onchange="applyOtherOption()" />
If you try this now, it will cause a javascript error on your page when you change the value of the the text field. This is because the browser fails to find a javascript function with the name applyOtherOption. Let's change that now:
<script type="text/javascript">
function applyOtherOption() {
var textField = document.getElementById("otherText");
var radioField = document.getElementById("otherRadio");
radioField.value = textField.value;
}
</script>
The result is that the "other" radio button's value is always changed to whatever the user enters into the text field and if this radio is selected, this is what is sent with the form.
Important
I've been a bit lazy here and typed out the easiest way to access the content of the form elements. This will work on most (probably all major) browsers but it is not the way it should be done. The proper method is to access the form first, then from the form element access the fields. To do it right you should read this article on setting the value of form elements.
I hope this is useful.
I was wondering if someone knows what controls the showing of previous form field entries in a form.
So for example, if in the name field, I go to type 'John' it appears below the field. Is that a feature of the browser or is it javascript or something?
Also, if it is the browser, is there a way I can turn this off for a given form?
You might be looking at autocomplete, if so turn it off with autocomplete="off" within the HTML of the relevant field:
<input type="text" name="firstname" autocomplete="off" />
References:
input element.
It's made by the browser, if you're working with HTML5 you can set a attribute to the input-element to remove it.
<input type="text" autocomplete="off" />
OK, I know how to detect keyboard input. I know how to focus on keyboard input.
But I want to know what the best practice is for detecting keyboard input => focusing to textarea or textfield => AND enter that key into the field.
Here's how it would work: I'm on a page. I type A. Then my textfield gets focused and A is typed into the field. This sounds trivial but actually I haven't found a simple way to do this. The reason is because the initial keyboard input event is not directed towards the textfield, and I need to propagate that event to the newly focused text field.
Is there a conventional approach to doing something like this?
Sample html:
<form>
<input type="text" />
<input type="text" id="thisguy" />
<input type="text" />
<input type="text" />
</form>
jQuery for above html
$(document).live('keypress', function (e) {
$('#thisguy').val($('#thisguy').val() + String.fromCharCode(e.which));
});
Needs to be cleaned up. Maybe set focus instead of changing the text value.