Select textbox on focus, deselect on blur - javascript

I am trying to select a textbox that has my link to this page url in it. I use:
$('.linkTo').focus(function() {
this.select();
});
$('.linkTo').blur(function() {
var input_value = this.value;
this.value = input_value;
});
But it only works the first time, the second time it puts a deselected cursor where I clicked.

Try using foucusin() and focusout()
http://api.jquery.com/focusin/
http://api.jquery.com/focusout/

Solution edited out from the question:
<input onclick="this.select();" class.... />

Related

dynamic input on change jquery

I have a dynamic input field which is being generated like this
var field = '<tr><td><input type="text" name="program_id" data-id="'+val['program_id']+'" value="'+val['program_id']+'">'+programBtn+'</td></tr>';
$('#transaction').append(field);
$('#transaction').on('change', 'input',function() {
console.log('hi');
});
And i have a button that when i click, it will input data into that input field using
$('.button').on('click', function() {
var text = $(this).data('text');
var id = $(this).data('id');
$('#transaction').find('input:'+id).val(text);
});
Ok if i click the button it will fill in those values but console.log('hi') isnt firing. But if i type in the text box and then i leave focus it, i can see console.log('hi') is firing. Note that code here is just an example.
My Jquery version is 3.2.1
You need to trigger change function as soon as you change the input value since change fn will be triggered only when the user changes the value manually and losses the focus.
you can trigger that using .trigger('change') or change()
var field = '<tr><td><input type="text" name="program_id" data-id="11" value="test"></td></tr>';
$('#transaction').append(field);
$('#transaction').on('change','input',function() {
console.log('hi');
});
$('button').on('click', function() {
var text = $(this).data('text');
var id = $(this).data('id');
$('#transaction').find('input[data-id="'+ id +'"]').val(text).change();
//$('#transaction').find('input[data-id="'+ id +'"]').val(text).trigger('change');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="transaction">Transaction: </div>
<button data-text="Some Text" data-id="11">Click</button>
I think you're finding input element that has data-id with value equal to data-id on the clicked button. If that so, you might use
$('#transaction').find('input[data-id="+ id +"]')
And from previous topic. onchange only fires when the user types into the input and then the input loses focus. So, you need to trigger the event manually.
$('.button').on('click', function() {
var text = $(this).data('text');
var id = $(this).data('id');
$('#transaction').find('input[data-id="+ id +"]').val(text).change(); // trigger change event
});

check box value Showing error

I have checkbox and disabled textbox. When checkbox is true, text box will be active and focused. when false, it become disabled. i added blur event on the text box and check box change event for certain operations.
<input type="checkbox" id="chkTest1" name="chkTest1" value="Bike"> check</br>
<input type="text" id="txtTest1" disabled />
Script
$('#chkTest1').change(function() {
var flagCheck = $(this).prop('checked');
$('#txtTest1').prop('disabled', !flagCheck).val('').off();
if(flagCheck)
{
$('#txtTest1').focus();
}
$('#txtTest1').blur(function () {
console.log($("#chkTest1").prop('checked'));
});
});
My problem is
when checkbox makes false, text box disabled and lost focus. so checkbox change event and blur event will be fired. But in blur event, check box value still be true instead of false. How to resolve this.
Here the Code Fiddle
Thanks in advance.
When the checkbox is clicked directly after filling the field then you need to wait since the blur triggers before the click that changes the checkbox.
Also be aware that the .off() will remove the blur handler from the text field after clicking!
$(function() {
$('#chkTest1').on("click", function() {
var flagCheck = this.checked;
$('#txtTest1').prop('disabled', !flagCheck).val('');
if (flagCheck) {
$('#txtTest1').focus();
}
});
$("#txtTest1").on("blur", function() {
setTimeout(function() { console.log("test check",$("#chkTest1").is(':checked')); },500);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="checkbox" id="chkTest1" name="chkTest1" value="Bike">check</br>
<input type="text" id="txtTest1" disabled />
#Glitson George:
i explaned why i am removing
the blur event in the below fiddle. Please check jsfiddle.net/ka1mkfrv/6 .
once blur function stored in memory,
2nd time onwards blur function will excute first then change event will excute
Please check the console for this.
http://jsfiddle.net/ka1mkfrv/6/
I guess you want to keep the text box content when disabling the checkbox:
$('#chkTest1').change(function() {
var flagCheck = $(this).prop('checked');
if(flagCheck)
{
$('#txtTest1').prop('disabled', !flagCheck).val('').off();
$('#txtTest1').focus();
} else {
$('#txtTest1').prop('disabled', !flagCheck);
}
$('#txtTest1').blur(function () {
console.log($("#chkTest1").prop('checked'));
});
});
http://jsfiddle.net/ka1mkfrv/4/
Your below code will only be executed when textbox is not disabled
$('#txtTest1').blur(function () {
console.log($("#chkTest1").prop('checked'));
});
So when your textbox will be enabled at the same time your checkbox will also be enabled.
When your text-box will be disabled at the same time checkbox your checkbox will also be disabled but your above will not be not execute.
That's why you cannot print the false value of checkbox
below is the working fiddle
$(document).on("change",'#chkTest1',function() {
var flagCheck = $(this).is(':checked')
if(flagCheck){
$('#txtTest1').removeAttr('disabled').val('').off();
$('#txtTest1').focus();
}
else
{
$('#txtTest1').prop('disabled', !flagCheck).val('');
console.log($("#chkTest1").is(':checked'));
}
});
http://jsfiddle.net/ka1mkfrv/5/

Select Text in Input On Focus Bootstrap 3

I have 4 fields for API keys (test and live, secret and public) all with the class of .key
I'm trying to get a select of the input value on focus of the input.
The input looks like so:
<input
type="text"
name="live_public_key"
class="form-control text-center key"
value="API key here"
readonly>
I've searched all over and the common answer to this seems to be something similar to this:
<script>
$(document).on('focus', '.key', function() {
this.select();
});
</script>
But this doesn't work.
It selects the text for a milli-second the deselects it and seems to move the focus back to the input itself.
I don't know if this is a bootstrap thing or if I've coded something wrong.
The field is geting unselected on mouseup. Try this:
$(document).on('focus', '.key', function() {
this.select();
}).on('mouseup', '.key', function(e) {
e.preventDefault();
});
JSFiddle
Use a workaround:
<script>
$(document).on('focus', '.key', function() {
var that = this;
window.setTimeout (function(){
that.select();
}, 100);
});
</script>

Select all the text in an input, focusin

I want to have all the text selected when I give the focus to an element.
I used
$('.class-focusin').focusin(function(e) {
$(this).select();
});
But it's not the perfect behavior I want. When i click between two characters, the input value is not seleted, there is a cursor in the middle.
I want the behavior of the url bar in chrome browser: you click and the cursor is replaced by the value selection
Feel free to test my problem in this fiddle:
http://jsfiddle.net/XS6s2/8/
I want the text to be able to receive the cursor once selected.
The answer selected, below is definitely what I wanted, Thanks
You could have a variable to see if the text has been selected or not:
http://jsfiddle.net/jonigiuro/XS6s2/21/
var has_focus = false;
$('.class-focusin').click(function(e) {
if(!has_focus) {
$(this).select();
has_focus = true;
}
});
$('.class-focusin').blur(function(e) {
has_focus = false;
});
I guess you have to wait for the browser to give focus to the element, then do your selection:
$('.class-focusin').focus(function(e) {
var $elem = $(this);
setTimeout(function() {
$elem.select();
}, 1);
});
Yuck. Or simply bind to the click event instead:
$('.class-focusin').click(function(e) {
$(this).select();
});
Try using click instead of focusin.
$('.class-focusin').click(function(e) {
$(this).select();
});
Demo
Bye!
Working Demo http://jsfiddle.net/cse_tushar/XS6s2/22/
$(document).ready(function () {
$('.class-focusin').click(function (e) {
$(this).select();
});
});
It's a direct duplicate of Select all the text in an input, focusin, here's a nice answer from it
$(".class-focusin").on("focus",function(e){
$(this).select();
});
$(".class-focusin").on("mouseup",function(e){
e.preventDefault();
});
http://jsfiddle.net/XS6s2/31/

How to Select / Highlight text box content on first click only

Please does anyone know the script that can help me highligh the content of a textfield on the first click
on the second click the selection / highligh should be cleared from the text box leavingg the insertion point.
Thank You in ADvance..
The script selects the text on the first click, but after every consecutive click the textarea will behave like a textarea always does. When the text area loses its focus due to the blur event and you click on it again, the text will be selected again.
Live Demo on JsFiddle
(function () {
var area = document.querySelector('#txt'),
clicked = false;
area.addEventListener('click', function () {
if (!clicked) {
area.select();
clicked = true;
}
});
area.addEventListener('blur', function () {
clicked = false;
});
})()
Because of addEventListener and querySelector the example is not fully cross browser compatible.
Try this: http://jsfiddle.net/4Hkhx/1/
$(document).ready(function(){
$('input').click(function(){
$(this).select();
});
});
function SelectText(sender) {
document.getElementById(sender.id).focus();
document.getElementById(sender.id).select();
}
<input type="text" id="tbTest" value="Test" onclick="SelectText(this)" />

Categories