We Keep Coding

tabindex navigation using "enter key" not working in dropdown

I have used below code for tabindex navigation using "enter key" in html form.It works fine as per my requirement,but this code is not working in dropdown.Please check below code and advise how to do this..
document.addEventListener('keydown', function (event) {
if (event.keyCode === 13 && event.target.nodeName === 'INPUT') {
var form = event.target.form;
var index = Array.prototype.indexOf.call(form, event.target);
form.elements[index + 1].focus();
event.preventDefault();
}
});

You just need to change your if statement to include the select node as example below.
document.addEventListener('keydown', function (event) {
if (event.keyCode === 13 && (event.target.nodeName === 'INPUT' || event.target.nodeName === 'SELECT')) {
var form = event.target.form;
var index = Array.prototype.indexOf.call(form, event.target);
event.preventDefault();
}
});
<form>
<input type="text">
<input type="checkbox">
<select>
<option>123</option>
</select>
<input type="radio">
</form>

keypress event not firing with enter key in angular 2

keypress event not firing with enter key in angular 2, following is the html and angular 2 code:
HTML
<input [(ngModel)]="filters[i]" type="number" size="30" pInputText (keypress)="filterByField($event, col.field, fieldType.TEXT)" class="{{'input-'+col.field}}" title="Only numbers are allowed" />
Angular 2
filterByField(event, field, fieldType){
console.log(event)
if(fieldType === this.fieldType.DD){
event.originalEvent.stopPropagation();
this.resetFilterBy(event.value, field);
this.loadData(null, true);
}
else if(fieldType === this.fieldType.TEXT){
let charCode = (event.which) ? event.which : event.keyCode;
console.log(charCode)
if (charCode == 101 && field == this.fields.TASKID.field){
event.preventDefault();
return false;
}
if((charCode === 13 && event.target.value.trim() !== "") || (charCode === 8) || (charCode === 46)) {
let filterValue = event.target.value;
this.resetFilterBy(filterValue, field);
this.loadData(null, true);
}
}
}

If you need to only listen for enter keypress event then you can use "keyup.enter" event in your html like:
<input #box (keyup.enter)="onEnter(box.value)">
Hope this helps. :)

#Component({
selector: 'my-search',
template: `
<input #criteria type='text' placeholder="Enter criteria" (keypress)="preventNumbers($event)" />
<button (click)="search(criteria.value)">Search</button>
`
})
export class MySearchComponent {
preventNumbers(e) {
console.log(e.keyCode);
if (e.keyCode >= 48 && e.keyCode <= 57) {
// we have a number
return false;
}
}
search(criteria) {
console.log("search for " + criteria);
}
}

Probably it's breaking because of the extra parameters at filterByField function
(keypress)="filterByField($event, col.field, fieldType.TEXT)"
passed as part of the call, Make sure all the properties you are binding in HTML are defined in component.

Disabled a input when another input is filled in

How to Disabled a input (with javascript) when another input is filled in
Exemple :
http://www.pct.com.tn/index.php?option=com_searchproduct&view=searchproduct&ctg=M&Itemid=48&lang=fr#b
Thanks

Monitor for on input with javascript and compare the value.
window.onload = function(){
var boxOne = document.getElementById('inputOne');
var boxTwo = document.getElementById('inputTwo');
boxOne.oninput = function(){
if(this.value != ""){
//if there is a value
//change the background color (optional)
boxTwo.style.backgroundColor = '#999';
boxTwo.disabled = true;
}
else{
//if there isn't a value
boxTwo.disabled = false;
//change the background color (optional)
boxTwo.style.backgroundColor = "transparent";
}
};
};
<input type="text" id="inputOne" placeholder="type to disable other">
<input type="text" id="inputTwo">

You can acheive this by using jquery for keydown event. I have done some sample code based on my understanding to your question. Assume you have two text boxes, on entering a text to any of textbox will lock the other
<input type = 'text' id='firstTextBox'/>
<input type = 'text' id='secondTextBox'/>
<script>
$("input").keydown(function(){
if($("#firstTextBox").val()!= '')
{
$('#secondTextBox').attr('disable', 'disable');
}
else if($("#secondTextBox").val()!= '')
{
$('#firstTextBox').attr('disable', 'disable');
}
else if($("#firstTextBox").val()== '' && $("#secondTextBox").val()== '')
{
$('#firstTextBox').removeAttr('disable');
$("#secondTextBox").removeAttr('disable');
}
});
</script>

Insert text after "this" input-element with javascript?

Code:
<input type="text" onkeydown="
if (event.keyCode == 13) { HERE, ECHO "OK" RIGHT AFTER THIS INPUT ELEMENT }
">
Is this possible to do without putting an ID or name on this element?
Or without encasing it in an identifiable div?
To clarify, this should be the result html after the event keycode is pressed:
<input type="text" onkeydown="
if (event.keyCode == 13) { HERE, ECHO "OK" RIGHT AFTER THIS INPUT ELEMENT }
">OK

If you want to use jQuery you can do the following:
HTML
<input name="ok" type="text" id="showOK" />
JAVASCRIPT
$("#showOK").keypress(function() {
if (event.keyCode == 13){
$("<p>OK</p>").insertAfter("#showOK");
}
});
Without the Use of ID
<input type="text" onkeydown="if (event.keyCode == 13) { $('<p>OK</p>').insertAfter(this);}">

Following your requirements and trying to keep your style, you can use the insertAdjacentHTML DOM Element method to add a text just after the input element.
<input type="text" onkeydown="
if (event.keyCode == 13) { this.insertAdjacentHTML('afterend', 'OK');}
">
See demo

I used a mixture of answers here.
First off i had to create a new var:
var that = this;
Or else javascript could not find "this" somehow.
Then used the jQUery method:
$('<span>OK</span>').insertAfter(that);
Resulting in:
<input type="text" onkeydown="
if (event.keyCode == 13) { var that = this; $('<span>OK</span>').insertAfter(that); }
">

Ok, first off, don't use inline-js. But to answer your question,
<input type="text" onkeydown="
if (window.event.keyCode == 13) { this.outerHTML = this.outerHTML + 'Ok'; } "/>
DEMO

Try this:
<input type="text" onkeydown="(function(event){
var input = event.target;
if(event.keyCode == 13){
input.outerHTML += 'OK';
}
})(window.event);" />
Demo.

<input type="text" onkeydown="ok(this, event)"/>
function ok(el, event) {
var _ok = document.createElement('span');
_ok.textContent = 'ok';
if (event.which == 13) {
el.parentNode.insertBefore(_ok, el.nextSibling)
}
}

Try this:
<input type="text" onkeydown="
if (event.keyCode == 13) { this.parentNode.insertBefore(document.createTextNode('OK'), this.nextElementSibling); }
">
It will add a text node (without creating any span or div) directly after the input.

CAPS lock popover

I am trying to show a popover when the CAPS lock key is on during typing password, the code is working fine, the popover is displayed when CAPS is on and is hidden when it is not. But I'm also getting the popover when I click on the password field, even if the caps is not on.
I need some help with this.
<input rel="popover" data-placement="right" data-content="CAPS IS ON" type="password" id="txtPassword" name="password" class="input-xlarge" value="" size="20" />
<script type="text/javascript">
jQuery('#txtPassword').keypress(function(e) {
var s = String.fromCharCode( e.which );
if ( s.toUpperCase() === s && s.toLowerCase() !== s && !e.shiftKey ) {
jQuery('#txtPassword').popover('show');
}
else {
jQuery('#txtPassword').popover('hide');
};
});
</script>

TRY
UPDATE
HTML
Type Here:<br><input type="text" id="textbox"><br>On each keypress I will tell if caps lock is on<br><br> CAPS LOCK: <span id="cap"></span>
JQUERY
//<![CDATA[
$(window).load(function(){
$('#textbox').keypress(function(e) {
var s = String.fromCharCode( e.which );
if (s.toUpperCase() === s && s.toLowerCase() !== s && !e.shiftKey) {
$('#cap').removeClass('red').addClass('green').html('ON');
} else {
$('#cap').removeClass('green').addClass('red').html('OFF');
}
});
});//]]>
css
.red {
color: red;
font-weight:bold;
}
.green {
color: green;
font-weight:bold;
}

Update Answer: to detect Capital letter
Here is the DEMO http://jsfiddle.net/yeyene/Z52Az/4/
Use this script,
$('#txtPassword').keyup(function () {
var character = $('#txtPassword').val();
var lastChar = character.substr(character.length - 1);
if (lastChar == lastChar.toUpperCase()) {
alert ('You typed capital letter!');
}
});