Control+backspace in textbox javascript - javascript

I have a requirement of having a text-box with default value say "PF_". If I type something and press control+backspace All the values are been deleted. This problem occurs only If I have an underscore "_" at the end.
Javascript
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;
}
});
Html
<input id="field" type="text" value="PF_" size="50" />
I have tried a sample fiddle.
Any Idea?

I'm not sure if this is what you're after, but this will reset the field to the previous value if the user tries to modify the read-only part:
$('#field').on('keypress, keydown', function (event) {
var $field = $(this);
var old = $field.val();
setTimeout(function(){
if($field.val().slice(0,3)!='PF_') {
$field.val(old);
}
},0);
});
Edit: in response to op's comments, try this code instead:
$('#field').on('keypress, keydown', function (event) {
var $field = $(this);
if(event.ctrlKey && event.which==8) { // ctrl-backspace
$field.val('PF_');
return false;
}
var old = $field.val();
setTimeout(function(){
if($field.val().slice(0,3)!='PF_') {
$field.val(old);
}
},0);
});
Fiddle

This is how I would do it:
$("#field").keyup(function(e){
if($(this).val().length < 3){
$(this).val("PF_");
}
});
Here is the JSFiddle demo

Related

make on keyup only fire once inside of an input

I have this method:
jQuery(function($) {
var input = $('#search');
input.on('keyup', function() {
var key = event.keyCode || event.charCode;
if( key == 8 || key == 46 ) {
console.log('ajax request cancelled');
recentRequest.abort();
}
});
});
but as of right now everytime I press Backspace it will fire, I want to make it so it can only be fired once inside of my input. Anyone have an idea?
Thanks
You can create a backspaceFlag variable to ensure that backspace code is allowed/triggered only once:
jQuery(function($) {
var backspaceFlag = true;
var input = $('#search');
input.on('keyup', function() {
var key = event.keyCode || event.charCode;
if ((key == 8 || key == 46) && backspaceFlag) {
backspaceFlag = false;
console.log('ajax request cancelled');
recentRequest.abort();
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type='text' id='search' />

Call function based on input

I've an textbox in asp.net,when i enter ";" semicolon in textbox means it have to call a function.Is there any way to do this.please help me out guys..i tried change function but it calls at every keypress in textbox.
$('#prgrp').on('change', function (evt)
{
var txt = $("#prgrp").val();
var valueArray = txt.split(';');
var valueSortArray = valueArray.sort();
var duplicateValues = [];
for (var i = 0; i < valueSortArray.length; i++)
{
if (valueSortArray[i + 1] == valueSortArray[i])
{
duplicateValues.push(valueSortArray[i]);
}
}
if (duplicateValues.length > 0)
{
$("#duplicate").html("Don't enter repeated values");
$('#duplicate').css('color', 'RED');
$("#prgrp").autocomplete("disable");
}
else {
$("#duplicate").html("");
$("#prgrp").autocomplete("enable");
}
});
Try this:-
$("#prgrp").keypress(function (e) {
if (e.keyCode == 59) {
//Call your function here
}
});
Please note, you can also use e.which in place of e.keyCode as it is jquery standardized.
Try this
$('#prgrp').bind('keypress', function(e) {
var code = e.keyCode || e.which;
if(code == 59) { //
//Do something
}
});
Demo
try this code
$( "#prgrp" ).keypress(function( event ) {
if ( event.which == 59 || event.keycode == 59 ) {
//your function call
}
});

Textarea Shift+Enter for next line and Enter to submit the form

In textarea when the user presses Shift+Enter then it should continue in next new line and when he simply presses Enter it should submit the form without using submit button.
Here is the Fiddle!!
I have browsed a lot but doesn't helped me, detailed explanation appreciated
Please help me!!
Code
$('commenttextarea').keyup(function (event) {
if ( event.shiftKey && event.keyCode == 13) {
var content = this.value;
var caret = getCaret(this);
this.value = content.substring(0,caret)+"\n"+content.substring(carent,content.length-1);
event.stopPropagation();
}else if(event.keyCode == 13)
{
$('commentform').submit();
}});
First, You missed to load any jquery version
Second, you missed # before textarea and form selectors.
Also use caret not carent in line
this.value = content.substring(0,caret)+"\n"+content.substring(caret,content.length-1);
// ----------------------------------^
Full Code
function getCaret(el) {
if (el.selectionStart) {
return el.selectionStart;
} else if (document.selection) {
el.focus();
var r = document.selection.createRange();
if (r == null) {
return 0;
}
var re = el.createTextRange(),
rc = re.duplicate();
re.moveToBookmark(r.getBookmark());
rc.setEndPoint('EndToStart', re);
return rc.text.length;
}
return 0;
}
$('#commenttextarea').keyup(function (event) {
if (event.shiftKey && event.keyCode == 13) {
var content = this.value;
var caret = getCaret(this);
this.value = content.substring(0, caret) + "\n" + content.substring(caret, content.length - 1);
event.stopPropagation();
} else if (event.keyCode == 13) {
$('#commentform').submit();
}
});
See this would work
As Rohan Kumar said: you forgot the id Selectors:
$('#commenttextarea').keyup(function (event) {
if ( event.shiftKey && event.keyCode == 13) {
var content = this.value;
var caret = getCaret(this);
this.value = content.substring(0,caret)+"\n"+content.substring(carent,content.length-1);
event.stopPropagation();
}else if(event.keyCode == 13)
{
$('#commentform').submit();
}});

Unable To get Selected text on Enter key press from list box

I am trying for smart search on my web page, so in my search on Click event I am getting Text which is selected in same textarea and but when I try with On keypress I'm unable to do find text of selected item. I am using jquery1.4.2 and tried option:select but still fail to do so...
My Code for click
$(document).ready(function() {
$('#ctl00_ContentPlaceHolder1_smartSearch').keyup(function(e) {
var str = document.getElementById('ctl00_ContentPlaceHolder1_smartSearch');
//alert("hi");
if (str.value.length >= 2) {
if (e.keyCode != 40 && e.keyCode != 38 && e.keyCode != 13) {
var str1 = str.value;
var str2 = str1.replace(' ', '+')
var url = "../SiteCache/90D/SmartGetQuoteData.aspx?Type=EQ&text=" + str2;
$("#ajax_response_smart").load(url);
}
$("#ajax_response_smart").show();
$('#listEQ li').live('click', function() {
var selected = $(this).text();
$("#ajax_response_smart").remove();
if (selected != "") {
var scripcode = selected.split("|");
document.getElementById('ctl00_ContentPlaceHolder1_smartSearch').value = scripcode[0];
document.getElementById('ctl00_ContentPlaceHolder1_hdnCode').value = scripcode[2];
}
});
var $listItems = $('#listEQ li');
var key = e.keyCode,
$selected = $listItems.filter('.ui-state-hover'),
$current;
if (key != 40 && key != 38 && key != 13)
{ return; }
else {
$listItems.removeClass('ui-state-hover');
}
if (key == 40) // Down key
{
if (!$selected.length || $selected.is(':last-child')) {
$current = $listItems.eq(0);
}
else {
$current = $selected.next();
}
}
else if (key == 38) // Up key
{
if (!$selected.length || $selected.is(':first-child')) {
$current = $listItems.last();
}
else {
$current = $selected.prev();
}
}
else if (key == 13) {
}
}
else {
$("#ajax_response_smart").hide();
}
if (typeof $current != "undefined") {
$current.addClass('ui-state-hover');
}
});
$("#ajax_response_smart").mouseover(function() {
var $listItems1 = $('#listEQ li');
$selected1 = $listItems1.filter('.ui-state-hover');
$(this).find("#listEQ li").mouseover(function() {
($selected1).removeClass("ui-state-hover");
$(this).addClass("ui-state-hover");
});
$(this).find("#listEQ li").mouseout(function() {
$(this).removeClass("ui-state-hover");
});
});
});
Please Suggest and Thanks in advance
hey i got my the answer i called the keypress event on my textbox in aspx page and from there i came on the currently paosted js page then on keypress event i got value.i.e not able to use keyup event to detect enter

How to limit Tab listener to callback only if the textbox has change

I'm trying to implement a Tab key listener for a textbox.
$('#mytextbox').live('keydown', function (e) {
if (e.keyCode == 9 || e.which == 9) {
// TO DO SOMETHING
}
});
However, for some reason I need to limit the tab listener's callback to invoke only when the textbox has changed. Is there anyway to do this?
You might be able to check the value of the input field to make sure it's different from it's original value?
E.g.
$('#mytextbox').live('keydown', function (e) {
if ((e.keyCode == 9 || e.which == 9) && ($('#TextBox').val() != 'Starting Value')) {
// TO DO SOMETHING
}
});
You can do it just like:
var data = "";
$('#mytextbox').live('keydown', function (e){
if(e.which == 9 || e.keyCode == 9){
if($(this).val() != data){
alert('changed!');
data = $(this).val();
}
}
});
http://jsfiddle.net/DDCZS/1/
Or without storing / knowing value of that textbox:
var changed = false;
$('#mytextbox').on('keydown', function (e) {
if (e.which == 9 && changed) {
e.preventDefault();
// TO DO SOMETHING
alert("works");
changed = false;
} else {
changed = true;
}
});
http://jsfiddle.net/9a37b/

Categories