We Keep Coding

Enter Key on Input Automatically Tab to Next Input with Fields in iFrames

I have a form with inputs which also has an iFrame embedded in the form which also has inputs (pseudo HTML):
<input type="text" name="one" value="one" />
<input type="text" name="two" value="two" />
<input type="text" name="three" value="three" />
<iframe
<input type="text" name="bacon" value="bacon">
</iframe>
<input type="text" name="four" value="four" />
<input type="text" name="five" value="five" />
When the user presses tab they are taken from input to input even inside the iframe fields selecting bacon after three. We all love bacon.
I also have some javascript that attempts to focus the next input on enter key:
$(document).ready(function() {
$(document).on('keydown', 'input', function(ev) {
// Move to next on enter
if (ev.which === 13) {
var inputs = $(':tabbable');
var next = inputs.index(this) + 1;
var input = inputs.eq(next == inputs.length ? 0 : next);
input.focus();
return false;
}
});
});
The problem is the javascript enter key code never focuses the bacon field, it will skip right over it. jsfiddle:
https://jsfiddle.net/54n8mqkh/4/
Let's all skip answers that include not using the iFrame. I know it is not an ideal implementation. However, I would accept ANY answer that allows the enter key to move through all the fields consistently including the iframe using any type of javascript. It does not have to be jquery specific.
I have tried a few different approaches to solve this but none I have found works. Thanks in advance to anyone who has a solution.

You need to focus inside of the iframe like so :
var frameBody = $("#IFrame_input").contents().find("input");
frameBody.focus();

I am going to answer my own question - after a few more hours I was able to solve my use case by expanding my selector to include the iframe. Then I build the array of inputs manually and while iterating I checked the node type for an iframe. If / when I encountered an iframe, I did the same select inside the iframe and added the inputs within the iframe:
$(document).ready(function() {
// Parent level helper function
window.tabToNext = function(me) {
var selector = ':tabbable, iframe';
var inputElems = [];
$(selector).each(function(index) {
var nodeName = $(this).prop('nodeName').toLowerCase();
if (nodeName == 'iframe') {
$(this).contents().find(selector).each(function(index) {
inputElems.push(this);
});
} else {
inputElems.push(this);
}
});
var inputs = $(inputElems);
var next = inputs.index(me) + 1;
if (next == inputs.length) next = 0;
var input = inputs.eq(next);
input.focus();
return false;
}
$(document).on('keydown', 'input', function(ev) {
// Move to next on enter
if (ev.which === 13) {
return window.tabToNext(this);
}
});
// Focus the first input
$('input[name=one]').focus();
});
FWIW: I could not just expand the selector as best I could tell and also I tried to use $.add to build the collection starting with an empty jQuery collection:
var foo = $([]);
foo.add(someElement);
... but it does not honor the order you add. It will re-order to the DOM according to the docs which SEEMS like it should be right, but for some reason my iframe child fields always ended up last and messed up the tab order.
Anyhow, I hope if someone else has this issue some day you find this helpful. Working solution:
https://jsfiddle.net/wbs1zajs/6/

what css selector needs to be used in this case

I have taken a 70-480 Microsoft exam this morning(HTML5,CSS3 and Javascript), and I found one question to be confusing/wrong/incomplete. The question is this:
you have a checkbox input and a text input on the webpage.
<input type="checkbox" id="chkBox" />
<input type="email" id="txtEmail" disabled/>
The requirement is that, when a user checks the checkbox:
the email input should be enabled
when the user unchecks the checkbox
the email input should be disabled
the email input should have gray background
You have the following script and style defined:
<style>
(selector) {
background-color:gray;
}
</style>
<script>
var chkbox = document.getElementById("chkBox");
if(chkbox.Checked)
{
document.getElementById("txtEmail").(selector) = (selector);
}
else
{
document.getElementById("txtEmail").(selector) = (selector);
}
</script>
You can pick from the options given below to replace the (selector) in the above code. you can use the same option any number of times.
1)enabled
2)disabled
3)true
4)false
5)set
I know that for enabling and disabling I need to use option 2,3 and 4 as shown below. And for the other (selector) which is in CSS, I had no clue what option made sense there. It did not make any sense to me, do you guys think the question is wrong or incomplete?
if(chkbox.Checked)
{
document.getElementById("txtEmail").disabled = false;
}
else
{
document.getElementById("txtEmail").disabled = true;
}

There is an :disabled selector, but it should have specified a colon in front of it, in my opinion
http://www.w3schools.com/cssref/sel_enabled.asp

Please visit below link to select disabled input
https://developer.mozilla.org/en-US/docs/Web/CSS/:disabled
input[type="email"]:disabled {
background: #d3d3d3;
}

My javascript placeholder function(s) only work in IE

I decided as placeholders are part of HTML5 and not fully supported by the browsers to make my own little placeholder system using Javascript.
This script seems to work perfectly for IE9 but not in Chrome, Safari, Oprea or Firefox.
I'm not sure what the culprit is but for some reason when I click in the field, it drops the cursor in amongst the placeholder text rather than clearing the field and allowing the user to type in a blank field as intended.
Could someone please help me correct this issue?
Chrome is returning the following error messages
Uncaught TypeError: Cannot set property 'className' of null
Uncaught TypeError: sting is not a function
The way I code this was that once the form loads the input field 'livesin' it calls my function, then when a user types or the field loses focus it calls the script again.
This is the form field that is using the placeholder system, the span contains my little tick or cross graphics for the form validation.
<label>Where do you live<br />
<input id="livesin" onfocus="placeholder()" onblur="placeholder(); addTick('livesin')" maxlength="50" placeholder="e.g. NSW, Australia" />
<script>placeholder()</script>
</label>
<span id="livesintick" class="neutral"></span>
Function placeholder checks to see if the value of the input field is blank, and if so adds my placeholder text and a class to style it, if the field contains my placeholder text I set the value back to being blank and the class to style the user input to look normal once more. After either of these options in then calls another function, explained beneath.
function placeholder(){
if (_("livesin").value == "") {
_("livesin").className = "placeholderFake";
_("livesin").value = "e.g. NSW, Australia";
} else if (_("livesin").value == "e.g. NSW, Australia") {
_("livesin").className = "placeholderNormal";
_("livesin").value = "";
}
addTick('livesin')
}
_() Function
function _(x){
return document.getElementById(x);
}
Function addTick accecpts any element name passed to it from my form and basically displays a tick graphic next to each form field that isn't empty.
function addTick(elem){
// Specific for livesin field, checking for fake placeholder
if (_(elem).value == "e.g. NSW, Australia") {
alert (elem);
if (_(elem).className == "neutral") {
exit;
}
_(elem+"tick").className = "neutral";
}
if (_(elem).value != "") {
_(elem+"tick").className = "valid";
}
}
My css is as follows
#livesin.placeholderFake {
color:#808080;
vertical-align:middle
}
#livesin.placeholderNormal {
color:#000000;
vertical-align:middle
}

JavaScript to clear SharePoint Text Filter box on focus

I am using the following code to clear default value which is "Keyword ...." from a SharePoint text filter box. I put in an alert at line 10 but it doesn't pop-up. Do you any reason why it would not clear the Text Box when a user clicks inside the box to type something.
<script type="text/javascript">
// Clears text box on click or focus
var TextBoxID = document.getElementById("ctl00_m_g_22e9e7dd_3da6_4f0b_bc1c_0874742c6012_SPTextSlicerValueTextControl");
TextBoxID.focus(function()
{
if(this.value == "Keyword ....")
{
alert('test line 10');
$(this).val("");
}
});
</script>

It looks like you may have an error in your jQuery selector.
Should that have been $('#'+searchID).focus(...)?
If not, I was mislead by the reuse of "searchID" as a local variable and the name of a class on an element.

Try something like this?
HTML
Search Box: <input onclick="clearPlaceholder();" id="ctl00_m_g_22e9e7dd_3da6_4f0b_bc1c_0874742c6012_SPTextSlicerValueTextControl" type="text" name="fname" value="Keyword..."><br>
JS
function clearPlaceholder(){
var TextBoxID = document.getElementById("ctl00_m_g_22e9e7dd_3da6_4f0b_bc1c_0874742c6012_SPTextSlicerValueTextControl");
TextBoxID.value = "";
}
http://jsfiddle.net/z5h6H/2/

Here is the code that solved the issue. I needed to clear the value in the text field when user click inside the text box.
<script type="text/javascript">
// Clears text box on click or focus
var TextBoxID = document.getElementById('ctl00_m_g_22e9e7dd_3da6_4f0b_bc1c_0815182c6012_SPTextSlicerValueTextControl');
TextBoxID.onfocus = function(){
if(this.value == 'Keyword ....')
{
TextBoxID.value="";
}
};
</script>

Jquery limit text in input box

I want to limit number of chars in input text field.
Code I'm using:
function limitText(field, maxChar){
if ($(field).val().length > maxChar){
$(field).val($(field).val().substr(0, maxChar));
}
}
Event is onkeyup.
When I type some text in input field cursor stays on the end of text but focus is backed on start of the text so I can't see cursor.
What can be a problem.
Browser is FF, on IE and chrome it is working correctly

you can also do it like this:
<input type="text" name="usrname" maxlength="10" />
to achieve this with jQuery, you can do this:
function limitText(field, maxChar){
$(field).attr('maxlength',maxChar);
}

Your code is working in FF. Here is slightly modified version of your code:
$('input.testinput').on('keyup', function() {
limitText(this, 10)
});
function limitText(field, maxChar){
var ref = $(field),
val = ref.val();
if ( val.length >= maxChar ){
ref.val(function() {
console.log(val.substr(0, maxChar))
return val.substr(0, maxChar);
});
}
}
Demo