We Keep Coding

Control+backspace in textbox 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

how to display "no result found" list search in jquery?

this is work fine..any idea about how to display "no result found"..
Here my code http://jsfiddle.net/UI_Designer/8p426fog/4/
$(".my-textbox").keyup(function() {
var val = $(this).val().toLowerCase()
$(".personsMenu li").each(function(i) {
var content = $(this).html();
if(content.toLowerCase().indexOf(val) == -1) {
$(this).hide()
} else {
$(this).show();
}
});
});
Thank You..

More elegant and the simplest way it to add extra variable and add <div class="no-results" style="display:none">no results found</div> into DOM, and then toggle visibility of the block jsFiddle
var $block = $('.no-results');
$(".my-textbox").keyup(function() {
var val = $(this).val();
var isMatch = false;
$(".personsMenu li").each(function(i) {
var content = $(this).html();
if(content.toLowerCase().indexOf(val) == -1) {
$(this).hide();
} else {
isMatch = true;
$(this).show();
}
});
$block.toggle(!isMatch);
});

Use the below code for no result found.
$(".my-textbox").keyup(function() {
var val = $(this).val();
$(".personsMenu li").each(function(i) {
var content = $(this).html();
if(content.toLowerCase().indexOf(val) == -1) {
$(this).hide();
$(".personsMenu").html("<ul><li><label> NO RESULT FOUND!</label></li></ul>");
}
else {
$(this).show();
}
});
});
Hope this fullfill your requirement.

Jquery Removing '0' in textbox after any value is entered

Here is my Fiddle
Initially the textbox won't have any value.
If any value is entered and it was emptied '0' will be added in it.
But the '0' is not removed after entering any value to it.
How can i remove the '0' if any value is entered it.
Here is my Code :
$('.qty').keyup(function(){
if($(this).val() == ""){
$('.qty').val('0');
}else if($(this).val() > 0){
$(this).val().replace(0,'');
}
});

Instead of
$('.qty').val('0');
Add palceholder.
$('.qty').attr('placeholder','0');

Try This Code:
$('.qty').keyup(function(){
if($(this).val() == ""){
$('.qty').val('0');
}else if($(this).val() > 0){
console.log($(this).val());
$(this).val().replace(0,'');
}
if($(this).val()!=0){
var text = $(this).val();
alert(text.slice(0,1));
if(text.slice(0,1)==0)
{
$(this).val(text.slice(1,text.length));
}
}
});
Working Demo

If placeholder isn't an option, you could parse value to integer:
$('.qty').keyup(function(){
var val = parseInt(this.value, 10);
this.value = val ? val: 0;
});

.replace() returns the modified string, you need to store it back into the value. Try this:
$('.qty').keyup(function () {
if ($(this).val() == "") {
$('.qty').val('0');
} else if ($(this).val() > 0) {
console.log($(this).val());
$(this).val(function() {
return this.value.replace(/^0+/, '');
});
}
});
I've also changed the replace() call to use a regular expression, so it only removes zeroes at the beginning of the input. Otherwise, it will change 102 to 12.
fiddle

You could achieve this using blur and focus instead of keyup :
$('.qty').blur(function() {
if (this.value == '') this.value = '0';
}).focus(function() {
if (this.value == '0') this.value = '';
});
JSFiddle example

Try this..
<input type="text" name="test" value="0">
$(document).ready(function(){
var Input = $('input[name=test]');
var value= Input.val();
$(Input).focus(function() {
if($(this).val() == value)
{
$(this).val("");
}
}).keyup(function(){
if($(this).val().length == 0)
{
$(this).val(value);
}
});
})

Try like this,
$('.qty').keyup(function(){
if($(this).val() == ""){
$('.qty').val('');
}else if($(this).val() > 0){
console.log($(this).val());
$(this).val().replace(0,'');
}
});

Instead of replace 0, replace with whole value using javascript Number function
$('.qty').keyup(function(){
if($(this).val() == ""){
$('.qty').val('0');
}else if($(this).val() > 0){
console.log($(this).val());
$(this).val(Number($(this).val()))
}
});
refer jsFiddle

How to refactor this code block to be simple and dynamic?

$(document).ready(function() {
$('.watermark').focus(function() {
if (this.className == 'watermark')
{
this.className = '';
this.value = '';
}
});
$('.watermark').blur(function() {
if (this.value == '')
{
this.className = 'watermark';
this.value = 'Type here';
}
});
});
I have this block of code that works perfectly except that it is not dynamic. I was wondering if there was an elegant way to reset the value to the original dynamically. I was thinking that maybe if you defined the original text in its ID or some other sort of attribute you could reset it that way.. or maybe you could use variables or arrays or tuples. What does SO think is the best way of doing it?

How about storing the value into some other attribute of the input?
$(document).ready(function() {
$('.watermark').focus(function() {
if (this.className == 'watermark')
{
this.className = '';
this.title = this.value;
this.value = '';
}
});
$('.watermark').blur(function() {
if (this.value == '')
{
this.className = 'watermark';
this.value = this.title;
}
});
});

In this scenario i prefer to use html5(placeholder attrinute) with javascript fall back.
function supports_input_placeholder() {
var i = document.createElement('input');
return 'placeholder' in i;
}
$(document).ready(function() {
if (!supports_input_placeholder())
{
$('input').each(function(){
$(this).val($(this).attr('placeholder'))
});
$('input').focus(function() {
if (this.className == 'watermark')
{
this.className = '';
this.value = '';
}
});
$('input').blur(function() {
if (this.value == '')
{
this.className = 'watermark';
this.value = $(this).attr('placeholder');
}
});
}
});
This script will detect if native placeholder is available if not it will take text from placeholder attribute and simulate it.

You can just store it in a variable if it's scoped to each element:
$(function() {
$('.watermark').each(function() {
var lead = $(this).val();
$(this).focus(function() {
if ($(this).val() == lead) $(this).val('');
}).blur(function() {
if ($(this).val() == '') $(this).val(lead);
});
});
});

Same function for multiple jQuery objects

I want the same functions to run for 2 jQuery objects: $('input[type="text"]') and $('textarea[type=text]'). How can I combine those two in the code below? (currently, only input is included).
$('input[type="text"]').focus(function() {
if (this.value == this.defaultValue){
this.value = '';
}
if(this.value != this.defaultValue){
this.select();
}
});
$('input[type="text"]').blur(function() {
if ($.trim(this.value == '')){
this.value = (this.defaultValue ? this.defaultValue : '');
}
});
Thanks!

Try this:
$('textarea[type="text"], input[type="text"]').focus(...).blur(...);
Similarly you can also use jQuery's add function:
$('textarea[type="text"]').add('input[type="text"]').focus(...).blur(...);

May be easier to put a class on it and filter by that.

You could create a plugin:
jQuery.fn.clearDefValueOnFocus = function() {
return this.focus(function(){
if (this.value == this.defaultValue){
this.value = '';
}
if(this.value != this.defaultValue){
this.select();
}
}).blur(function(){
if (jQuery.trim(this.value) == ''){
this.value = this.defaultValue || '';
}
});
};
$('input[type="text"]').clearDefValueOnFocus();
$('textarea[type=text]').clearDefValueOnFocus();