We Keep Coding

Tabs default action is not stopped event though i use e.preventDefault()

I am showing a text area in a modal when I pressed tab it moves to the next input I wrote code to stop this but I didn't work for me.(when I pressed tab the execution even not coming to the acceptTabsSpace function)
$(document).on("keyup", "#collection-text-input", acceptTabsSpace);
function acceptTabsSpace(e){
var keyCode = e.keyCode || e.which;
if (keyCode == 9) {
e.preventDefault();
return false;
}
}

Add the listener to trigger on keydown instead:
$(document).on("keydown", "#collection-text-input", acceptTabsSpace);
function acceptTabsSpace(e){
var keyCode = e.keyCode || e.which;
if (keyCode === 9) {
e.preventDefault();
return false;
}
}

Use keydown instead key up and for tabspaces press tab twice.
$(document).on("keydown", "#collection-text-input", acceptTabsSpace);
function acceptTabsSpace(e) {
var keyCode = e.keyCode || e.which;
if (e.keyCode === 9) {
e.preventDefault();
this.value = this.value.substring(0, this.selectionStart) + "\t" +
this.value.substring(this.selectionEnd);
this.selectionEnd = s + 1;
}
}

Keyboard up and down arrows used to increase decrease value

Use the onkeydown and onkeyup events to increase and decrease the value in label or some p tags. no need in textbox(input)
I got lot of examples but it all work in textbox.
without using mouse i need to increase value with one(1,2,3,4...n)in (onkeyup or onkeyright)
and (n.....4,3,2,1) in (onkeydown or onkeyleft) key press events on label or p tag
<input type="text" size="2" value="1" />
<script>
var $input = $('label');
$(document).on('keydown', function(event) {
if (event.which == 38 || event.which == 104) {
$input.val((parseInt($input.val()) + 1));
} else if (event.which == 40 || event.which == 98) {
$input.val((parseInt($input.val()) - 1));
}
});
</script>
this works in textbox.. how i use this in label

Try this:
var $input = $('p');
$(document).on('keydown', function(event) {
if (event.which == 38 || event.which == 104) {
$input.text((parseInt($input.text()) + 1));
} else if (event.which == 40 || event.which == 98) {
$input.text((parseInt($input.text()) - 1));
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p id="inputValue">0</p>
You were almost there, but here's what I changed to get it to work:
Use .text() instead of .val()
Changed to <p> instead of <input>
Updated $input to match <p>
To use a <label> tag, just change
var $input = $('p'); to var $input = $('label'); and
<p id="inputValue">0</p> to <label id="inputValue">0</label>
e.g.
var $input = $('label');
$(document).on('keydown', function(event) {
if (event.which == 38 || event.which == 104) {
$input.text((parseInt($input.text()) + 1));
} else if (event.which == 40 || event.which == 98) {
$input.text((parseInt($input.text()) - 1));
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label id="inputValue">0</label>

Toggle up/down with up down keys in auto suggest

I am trying to make auto-suggest using ajax with php and mysql. Auto-suggest is working well but I am getting problem with toggling up down with up down keys. I am following this jsfiddle as example for completing my work. But can't get why Navigate function is been called twice. Because it alerts twice when I press down keys.
jquery
var Navigate = function(diff){
displayBoxIndex += diff;
var oBoxCollection = $("#searched a .searchFull");
if (displayBoxIndex >= oBoxCollection.length) {
displayBoxIndex = 0;
alert("A");
}
if (displayBoxIndex < 0) {
displayBoxIndex = oBoxCollection.length - 1;
alert("B");
}
var cssClass = "selected";
oBoxCollection.removeClass(cssClass).eq(displayBoxIndex).addClass(cssClass);
}
$(document).on('keypress keyup', "#search", function (e) {
if (e.keyCode == 13 || e.keyCode == 32) {
$('.display_box_hover').trigger('click');
return false;
}
if (e.keyCode == 40) {
//down arrow
Navigate(1);
}
if (e.keyCode == 38) {
//up arrow
Navigate(-1);
}
});
HTML
<div id="searched" style="display: block;">
<a href="http://localhost/c2c/init/product/78">
<div class="searchFull">
</a>
<a href="http://localhost/c2c/init/product/77">
<div class="searchFull">
</a>
<a href="http://localhost/c2c/init/product/76">
<div class="searchFull">
</a>
<a href="http://localhost/c2c/init/product/73">
<div class="searchFull">
</a>

Here is the solution for your issue:
You call two events like: keypress and keyup. So, it will call twice.
Just remove one like here i remove keypress and here it works well.
$(document).on('keyup', function (e) {
if (e.keyCode == 13 || e.keyCode == 32) {
$('.display_box_hover').trigger('click');
return false;
}
if (e.keyCode == 40) {
//down arrow
//alert("down");
Navigate(1);
}
if (e.keyCode == 38) {
//up arrow
Navigate(-1);
}
});
Check Fiddle here.
And as per comment Here selected class not removed checked in firebug. See below image.
Hope it helps.

How to make only some text in a text-box read-only while allowing the rest to be edited

I'm trying to use Javascript to make a text box that contains some read-only text at the beginning of the text box and then allows editing following the read-only text. How can I do this in Javascript/jquery?

Here's an attempt:
var readOnlyLength = $('#field').val().length;
$('#output').text(readOnlyLength);
$('#field').on('keypress, keydown', function(event) {
var $field = $(this);
$('#output').text(event.which + '-' + this.selectionStart);
if ((event.which != 37 && (event.which != 39)) &&
((this.selectionStart < readOnlyLength) ||
((this.selectionStart == readOnlyLength) && (event.which == 8)))) {
return false;
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<input id="field" type="text" value="CAN'T TOUCH THIS!" size="50" />
<div id="output">
</div>
This disables keys other than the left and right arrows for the read-only part. It also disables the backspace key when just at the end of the read-only part.
From what I've read, this won't work on IE <= 8.
Here it is in plain JavaScript (no JQuery):
function makeInitialTextReadOnly(input) {
var readOnlyLength = input.value.length;
field.addEventListener('keydown', function(event) {
var which = event.which;
if (((which == 8) && (input.selectionStart <= readOnlyLength)) ||
((which == 46) && (input.selectionStart < readOnlyLength))) {
event.preventDefault();
}
});
field.addEventListener('keypress', function(event) {
var which = event.which;
if ((event.which != 0) && (input.selectionStart < readOnlyLength)) {
event.preventDefault();
}
});
}
makeInitialTextReadOnly(document.getElementById('field'));
<input id="field" type="text" value="CAN'T TOUCH THIS!" size="50" />

here is some thoughts
roughly a solution with jquery
html
<input type="text" id='myinput' value ="my text">
jquery
var orginal_text = $('#myinput').val();
var regular_expression = '/^' + orginal_text +'/' ;
$('#myinput').keyup(function(){
var current_text = $('#myinput').val();
if(current_text.match('^' + orginal_text +'') == null){
$('#myinput').val(orginal_text + ' ' +current_text )
}
})
http://jsfiddle.net/e5EDY/
with css
html
<input type="text" id='my_sticky_text' value ="my text" readonly='readonly'>
<input type="text" id='myinput' value ="my text">
css
#my_sticky_text{
position:absolute;
left : 0px;
}
#myinput{
position:absolute;
left : 50px;
border-left:none;
}
http://jsfiddle.net/kaf4j/
combination to retrieve the value
html
<input type="text" id='my_sticky_text' value ="my text" readonly='readonly'>
<input type="text" id='myinput' value ="my text">
<br>
<hr>
<button id='getval'>get value</button>
css
#my_sticky_text{
position:absolute;
left : 0px;
}
#myinput{
position:absolute;
left : 50px;
border-left:none;
}
jquery
$('#getval').click(function(){
var sticky_text = $('#my_sticky_text').val();
var user_text = $('#myinput').val();
alert (sticky_text + ' ' + user_text)
})
http://jsfiddle.net/YsNMQ/
what do we get from all this ?!.. simply you cant acomplish what you want in a nice way .. and i cant imagine a situation where i want to do so .
alternatives
1 - in the text-field label put the constant text .
2 - when the user submits the form capture the value of the text-field and add your text to it .
3- add a help note to the user that this input should be as follows (eg : mytext-yourtext)

Below is a modified version of John S's answer to prevent cut/paste operations (e.g. via right-click):
function makeInitialTextReadOnly(input) {
var readOnlyLength = input.value.length;
input.addEventListener('keydown', function(event) {
var which = event.which;
if (((which == 8) && (input.selectionStart <= readOnlyLength))
|| ((which == 46) && (input.selectionStart < readOnlyLength))) {
event.preventDefault();
}
});
input.addEventListener('keypress', function(event) {
var which = event.which;
if ((event.which != 0) && (input.selectionStart < readOnlyLength)) {
event.preventDefault();
}
});
input.addEventListener('cut', function(event) {
if (input.selectionStart < readOnlyLength) {
event.preventDefault();
}
});
input.addEventListener('paste', function(event) {
if (input.selectionStart < readOnlyLength) {
event.preventDefault();
}
});
}
makeInitialTextReadOnly(document.getElementById('field'));
Fiddle: http://jsfiddle.net/p0jyktvu/3/

How to simulate TAB on ENTER keypress in javascript or jQuery

I want to change keycode in keydown ( key press ) in all input in a page.I want to replace Enter keycode with TAB key code. How I can do this?
thanks
EDIT 1)
Consider this code:
<div>
<asp:RadioButtonList ID="RadioButtonList1" runat="server">
<asp:ListItem>1</asp:ListItem>
<asp:ListItem>2</asp:ListItem>
<asp:ListItem>3</asp:ListItem>
<asp:ListItem>4</asp:ListItem>
</asp:RadioButtonList>
<br />
<br />
<asp:TextBox ID="TextBox1" runat="server">3333</asp:TextBox>
<br />
<br />
<asp:DropDownList ID="DropDownList1" runat="server">
<asp:ListItem>1</asp:ListItem>
<asp:ListItem>2</asp:ListItem>
<asp:ListItem>3</asp:ListItem>
</asp:DropDownList>
</div>
I want when user press Enter on eny of above control focus go to next control.
thanks

I've had a similar problem, where I wanted to press + on the numpad to tab to the next field. Now I've released a library that I think will help you.
PlusAsTab: A jQuery plugin to use the numpad plus key as a tab key equivalent.
Since you want enter/↵ instead, you can set the options. Find out which key you want to use with the jQuery event.which demo.
JoelPurra.PlusAsTab.setOptions({
// Use enter instead of plus
// Number 13 found through demo at
// https://api.jquery.com/event.which/
key: 13
});
Then enable the feature by adding plus-as-tab="true" to the form fields you want to use enter-as-tab in, or some other element that contains these form fields. Radio buttons should not be a problem, as they are covered by my other library, EmulateTab - see autonavigation of radio buttons in that demo.
<div plus-as-tab="true">
<!-- all focusable elements inside the <div> will be enabled -->
<asp:RadioButtonList ID="RadioButtonList1" runat="server">
<!-- Radio buttons should not be a problem. -->
</asp:RadioButtonList>
</div>
You can try it out yourself in the PlusAsTab enter as tab demo.

This code is to replace enter with tab character:
$("#wmd-input").bind("keypress", function(e) {
if (e.keyCode == 13) {
var input = $(this);
var inputVal = input.val();
setTimeout(function() {
input.val(inputVal.substring(0,inputVal.length) + "\t");
}, 1);
}
});
Live Demo
UPDATE:
This code is to focus to on the next element:
$(document).ready(function () {
$("input,select").bind("keydown", function (e) {
if (e.keyCode == 13) {
var allInputs = $("input,select");
for (var i = 0; i < allInputs.length; i++) {
if (allInputs[i] == this) {
while ((allInputs[i]).name == (allInputs[i + 1]).name) {
i++;
}
if ((i + 1) < allInputs.length) $(allInputs[i + 1]).focus();
}
}
}
});
});

Hope this works
$('input,textarea').keydown(function(){
if(event.keyCode==13) {
event.keyCode = 9;
}
});
Edit
Try this http://jsfiddle.net/GUmUg/. Play around with selectors to make this work as i don't know asp
$('input,textarea').keypress(function(e){
if(e.keyCode==13) {
$(this).next().focus();
}
});

$('input').on('keydown',function(e){
var keyCode = e.keyCode || e.which;
if(e.keyCode === 13) {
e.preventDefault();
$('input')[$('input').index(this)+1].focus();
}
});
check fiddle here : http://jsfiddle.net/Pd5QC/

The way I do it is by using jquery to each over your selection and focusing on the element after the current on you are on.
$(document).on('keyup', '.my-input', function (ev) {
if (ev.keyCode == '13') {
var currentInput = this;
var isOnCurrent = false;
$('.my-input').each(function () {
if (isOnCurrent == true) {
$(this).focus();
return false;
}
if (this == currentInput) {
isOnCurrent = true;
}
});
}
});

I think this work:
$('input').live("keypress", function (e) {
/* ENTER PRESSED*/
var OffSet = 0;
if (e.keyCode == 13) {
/* FOCUS ELEMENT */
if ($(this).is("input[type='radio']")) {
var tblID = $(this).closest('table').attr('id');
var radios = $('#' + tblID).find(":input");
//alert(radios.index(this));
OffSet = radios.length - radios.index(this) - 1;
}
//alert(OffSet);
var inputs = $(this).parents("form").eq(0).find(":input");
var idx = inputs.index(this);
inputs[idx + OffSet].blur();
try {
inputs[idx + OffSet].selectionStart = inputs[idx + OffSet].selectionEnd = -1;
} catch (e) {
}
if (idx == inputs.length - 1) {
inputs[0].select();
} else {
inputs[idx + 1 + OffSet].focus(); // handles submit buttons
try {
inputs[idx + 1 + OffSet].select();
} catch (e) {
}
}
return false;
}
});

I created a simple jQuery plugin which does solve this problem. It uses the ':tabbable' selector of jQuery UI to find the next 'tabbable' element and selects it.
Example usage:
// Simulate tab key when enter is pressed
$('.myElement').bind('keypress', function(event){
if(event.which === 13){
if(event.shiftKey){
$.tabPrev();
}
else{
$.tabNext();
}
return false;
}
});

$(document).ready(function() {
//Objetos con CssClass="EntTab" sustituye el Enter (keycode 13) por un Tabulador (keycode 9)!!
$(".EntTab").bind("keypress", function(e) {
if (e.keyCode == 13) {
var inps = $("input, select"); //add select too
for (var x = 0; x < inps.length; x++) {
if (inps[x] == this) {
while ((inps[x]).name == (inps[x + 1]).name) {
x++;
}
if ((x + 1) < inps.length) $(inps[x + 1]).focus();
}
} e.preventDefault();
}
});
});