Select Text in Input On Focus Bootstrap 3 - javascript

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>

Related

Detect if a field is updated with JavaScript or jQuery

I have a very extensive template, and there is a form that updates the value of a text field with JavaScript or jQuery, this function has not been able to locate it, and I need to detect when this field is updated, I have tried with all these functions, but it is not detecting when it is updated.
What is the reason why it is not detected when the field is updated from JavaScript but is detected when updated when I write and click outside the field?
Important: The value 90,000 "that is added dynamically, makes it a specific function, which I have not been able to find, and is to try to detect if the value changed with JavaScript.
$(function(){
// Automatic update, strange function
setTimeout(function(){
// Value updated automatically
$('#long').val("90.000");
}, 2000);
/**
* Detect if that field is updated
*/
$('input#long').on('change', function(){
alert("Updated");
});
$(':input').on('change', function(){
alert("Updated");
});
$('input#long').change(function(){
alert("Updated");
});
$(document).on('change', 'input#long', function(){
alert("Updated");
});
$(document).on('change', 'input', function(){
alert("Updated");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="long">
So, according to your edits/comments from other answers, you cannot trigger change manually.
A MutationObserver would be a good way to solve this, except they can't observe input value changes, as explained here.
Your only way out, as far as I can tell, is using setInterval to compare the current value with the old one every few milliseconds. A bit ugly and not optimal at all, but does the job. Here's a sample:
$(function() {
setTimeout(function() {
$('#long').val('90.000');
}, 1000);
$('#long').on('change', function() {
alert('changed');
});
// Store the current value
$('#long').data('oldVal', $('#long').val());
// Every 100ms, trigger `change` event whenever new value != old
setInterval(function() {
if ($('#long').val() !== $('#long').data('oldVal')) {
$('#long').trigger('change');
$('#long').data('oldVal', $('#long').val());
}
}, 100);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="long">
You can use the change method from jquery to subscribe the event.
The html
<input class="target" type="text" value="Field 1">
and the script
$(".target").change(function() {
alert( "Handler for .change() called." );
});
See this codepen
See the jquery docs
DOM events won't be triggered by JS/jQuery calls. You can easily trigger the change event manually, like this:
$('#long').val('90.000').trigger('change')
Sample:
$(function(){
// Automatic update, strange function
setTimeout(function(){
// Value updated automatically
$('#long').val("90.000").trigger('change');
}, 2000);
/**
* Detect if that field is updated
*/
$('input#long').on('change', function(){
alert("Updated");
});
$(':input').on('change', function(){
alert("Updated");
});
$('input#long').change(function(){
alert("Updated");
});
$(document).on('change', 'input#long', function(){
alert("Updated");
});
$(document).on('change', 'input', function(){
alert("Updated");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="long">
Have you tried the keyup trigger wich fires straight when the key is released?
$(function(){
// Automatic update, strange function
setTimeout(function(){
// Value updated automatically
$('#long').val("90.000");
}, 2000);
/**
* Detect if that field is updated
*/
$( "#long" ).keyup(function() {
alert( "Handler for .keyup() called." );
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="long">
Use keyup and paste instead of change. See keyup()
$(function(){
// Automatic update, strange function
setTimeout(function(){
// Value updated automatically
$('#long').val("90.000");
}, 2000);
/**
* Detect if that field is updated by key press or pasting text
*/
$(document).on('keyup paste', 'input', function(){
alert("Updated text field");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="long">
change()
The change event is sent to an element when its value changes. This
event is limited to input elements, textarea boxes and select
elements. For select boxes, checkboxes, and radio buttons, the event is fired immediately when the user makes a selection with the mouse,
but for the other element types the event is deferred until the
element loses focus.

Change function on Javascript/jQuery

I have a textfield, and I want the field to be disabled or read only if I change text on the field. But, before that, I can't make change function. I don't know why.
I have tried this code :
$("#submitOrder_cust_id_name").click(function () {
alert("Test");
});
and when I click the field it is working.
But, when I use this code
$("#submitOrder_cust_id_name").change(function () {alert("Test");});
or this code
$("#submitOrder_cust_id_name").on('change', function () {
alert("Test");
})
it doesn't work at all.
Please help. Thanks.
jquery change event trigger only when hit enter on the text box. If you want to trigger a event when you enter any character use "keypress" instead of "change"
Refer this :
https://www.w3schools.com/jquery/event_keypress.asp
use on 'change':
$('#submitOrder_cust_id_name').on('change', function () {
alert('test');
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="submitOrder_cust_id_name" />
Try using .blur(). This will be called when the input field loses focus:
$('#submitOrder_cust_id_name').on('blur', function () {
alert('test');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="submitOrder_cust_id_name" />

Detect change in an input field when selecting value from a box

I want to detect a change in the input field when i select a value from the box like in the picture below.
html:
<input type="text" class="AgeChangeInput" id="range"/>
js:(not working)
<script>
$(document).ready(function()
{
alert("Hello");
$("#range").bind('input', function()
{
alert("done");
});
});
</script>
I also tried live on functions but they didn;t work too.
Your date selection box should fire a change event, then you only need to capture it:
$(function () {
$('#range').change(function () {
...
});
});
If the selection box doesn't fire the event, you'll need to trick the dom. Something like:
$(document).ready(function () {
// Asuming your selection box opens on input click
$('#range').click(function () {
$('.special-box-class').click(fireRangeEvent);
});
// Now the firing function
function fireRangeEvent() {
...
}
});
Hope it works
Try to use this code
changeDate - This event is fired when the date is changed.
$('#range').datepicker().on('changeDate', function(ev) {
//example of condition
if (ev.date.valueOf() > checkout.date.valueOf()) {
//make action here
alert('Here');
}
});

Simulate an "ontype" event

I want to simulate the Google Search effect that even with the search box not focused, the user can start typing and the input box will capture all keyboard strokes.
I have looked for an ontype event, but haven't found anything. I know that the event object in callbacks for events like click has keyboard information, but I don't think this is what I'm after.
This does the job:
$(document).on('keydown', function() {
$('input').focus();
});
HTML:
<input type="text" id="txtSearch" />
Javascript:
var googleLikeKeyCapture = {
inputField : null,
documentKeydown: function(event) {
var inputField = googleLikeKeyCapture.inputField;
if(event.target != inputField.get(0)) {
event.target = inputField.get(0);
inputField.focus();
}
},
init: function() {
googleLikeKeyCapture.inputField = $('#txtSearch');
$(document).bind('keydown', googleLikeKeyCapture.documentKeydown);
googleLikeKeyCapture.inputField
.focus(function() {
$(document).unbind('keydown');
})
.blur(function() {
$(document).bind('keydown', googleLikeKeyCapture.documentKeydown);
});
googleLikeKeyCapture.init = function() {};
}
};
$(googleLikeKeyCapture.init);
Also you can find jsFiddle example here
EDIT :
And now it's a jQuery plugin. :) If keydown occures in a textarea or input field it doesn't capture keys, anything else goes to designated input field. If your selector matches more than one element it only uses the first element.
Usage: $('#txtSearch').captureKeys();
The event you are after is onkeypress.
Try this jQuery Text Change Event plugin:
http://www.zurb.com/playground/jquery-text-change-custom-event

Select textbox on focus, deselect on blur

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.... />

Categories