I am going in circles here. Thought I could fix this issue asked a question earlier answered it only to get stuck again. Have a simple form with multiple panels containing text and numeric input field. When a user clicks in tabs in or whatever the content of that input field text should be selected. I've started looking at THIS article and also looking at the jquery focus and select. Nothing seems to be working. When clicking in the input field nothing seems to be highlighting the text already there.
Thanks
Here are a few things I've tried :
$("input[type=text]").focus(function() {
$(this).select();
});
$('#itemPanel :input[type="text"]').each(function() {
$(this).click(function() {
console.log("I was clicked in");
});
});
How about using on focus
$('input[type=text]').on('focus', function() {
$(this).select();
});
You can also use mouseup
$('input[type=text]').on('mouseup', function() {
$(this).select();
});
Fiddle
To autoselect the text in the input box I would recommend using clickevent instead of the focus event in your example.
This also seems to be written in the code example link you posted. http://www.electrictoolbox.com/jquery-select-function/ (Notice how it's using click instead of focus)
Try this:
$("input[type=text]").click(function() {
$(this).select();
});
--EDIT
Based on some feedback in the comments, there's a link to another similar question that suggests something like this:
$('input[type=text]').focus(function() {
$('input[type=text]').select().one('mouseup', function(e) {
e.preventDefault();
});
});
Related
I am trying to trigger an event when an input textbox changed:
$('.packeta-selector-branch-id').on('change', function () { alert('helo'); })
This works only If I manually type something in the textbox, but in my case where an external javascript is setting the textbox value, not working.
I created a little jsfiddle to show this:
https://jsfiddle.net/6vnuqxa0/
To try out:
Click on Choose pickup point
Select something from list and click on "Choose this pick up point".
Any ideas how to resolve this issue?
The selected answer to jQuery watch for domElement changes? suggests binding to the DOMSubtreeModified event. I have tried iin your fiddle and it works! The answer does mention that this event may be deprecated, but it is worth looking into.
In your case, add an id to your div so that you have:
<div id="packeta-selector-branch-id" class="packeta-selector-branch-id"></div>
Then the following code will trigger the alert when the contents of that div change.
$('#packeta-selector-branch-id').bind('DOMSubtreeModified', function(e) {
if (e.target.innerHTML.length > 0) {
alert('helo');
}
});
Otherwise, I would look at the widget itself and try and determine if it fires any events on select. If so, you could attach some behaviour to that event.
trigger('change') when click button. but a ID or name on your input would be better
$(document).off('click', '.button select-branch').on('click', '.button select-branch', function(){
$('.packeta-selector-branch-id').trigger('change');
})
I know there are similar questions on stackoverflow, but
none of them I think has working solution. So when you type key UP or Down when you have focus on an HTML input field, the cursor automatically moves to the front/end of the input value.
(You can check this with the Top-right Search box on the stackoverflow site).
I want to remove this!!
I tried the following code, but didn't work:
$(document).on("keydown", "#input_field", function(event) {
if(event.which==38 || event.which==40){
event.preventDefault();
}
});
Any solution for this..?
I don't see the point in preventing a fairly useful behavior, but this works for me with the SO search box:
$(document).on("keydown keyup", "#search input", function(event) {
if(event.which==38 || event.which==40){
event.preventDefault();
}
});
This code targets both keyup and keydown events.
I'm looking for a script that will fire up whenever I click on an input box there will be a pop up modal with TextField and save and cancel button. So when I click save the text i typed on the text field will be saved on the input box.
I'm so sorry been busy with something else and I'm so sorry for being not so descriptive with my question (just a newbie). I'm currently using this: mywebdeveloperblog.com/my-jquery-plugins/jquery-popbox my only problem is that there's no 'cancel' button so there's no way to cancel in iOS or other touch devices. Can anyone help? Thanks.
Search for jquery ('#seuID').onclick() function with a alert inside the function it will call and pass the result into a variable or array so you can do what you want with it.
Try
$('input[type="text"]').focus(function(){
//your code here
});
you can find more info here.
$(document)
.ready(function () {
$('input')
.click(
function () {
var NWin = window.open($(this)
.prop('href'), '', 'height=800,width=800');
if (window.focus) {
NWin.focus();
}
return false;
})
});
trying to figure out why this is happening - I have an input text field and I want all the text to be highlighted when the field receives focus. This happens, very quickly, and then all of the text is unselected. Any idea why this would occur? Here's the code I'm using:
$("#permalink").focus(function(){
this.select();
});
You need to override the mouseup event on the input element (as mentioned in this post - thanks MrSlayer!)
See here for example: http://jsfiddle.net/f8TdX/
This is an issue in WebKit. The best option is to use a combination of the focus and mouseup events. The following comes from another answer to a similar question.
$("#permalink").focus(function() {
var $this = $(this);
$this.select();
window.setTimeout(function() {
$this.select();
}, 1);
// Work around WebKit's little problem
$this.mouseup(function() {
// Prevent further mouseup intervention
$this.unbind("mouseup");
return false;
});
});
Give this a shot
$(document).ready(function() {
$("input:text").focus(function() { $(this).select(); } );
});
Select all contents of textbox when it receives focus (JavaScript or jQuery)
i have a function that currently working on .keypress event when the user right something in the textbox it do some code, but i want the same event to be triggered also when the user clear the textbox .change doesn't help since it fires after the user change the focus to something else
Thanks
The keyup event will detect if the user has cleared the box as well (i.e. backspace raises the event but backspace does not raise the keypress event in IE)
$("#inputname").keyup(function() {
if (!this.value) {
alert('The box is empty');
}
});
jsFiddle
As Josh says, this gets fired for every character code that is pressed in the input. This is mostly just showing that you need to use the keyup event to trigger backspace, rather than the keypress event you are currently using.
The solution by Jonathon Bolster does not cover all cases. I adapted it to also cover modifications by cutting and pasting:
$("#inputname").on('change keyup copy paste cut', function() {
//!this.value ...
});
see http://jsfiddle.net/gonfidentschal/XxLq2/
Unfortunately it's not possible to catch the cases where the field's value is set using javascript. If you set the value yourself it's not an issue because you know when you do it... but when you're using a library such as AngularJS that updates the view when the state changes then it can be a bit more work. Or you have to use a timer to check the value.
Also see the answer for Detecting input change in jQuery? which suggests the 'input' event understood by modern browsers. So just:
$("#inputname").on('input', function() {
//!this.value ...
});
Another way that does this in a concise manner is listening for "input" event on textarea/input-type:text fields
/**
* Listens on textarea input.
* Considers: undo, cut, paste, backspc, keyboard input, etc
*/
$("#myContainer").on("input", "textarea", function() {
if (!this.value) {
}
});
You can check the value of the input field inside the on input' function() and combine it with an if/else statement and it will work very well as in the code below :
$( "#myinputid" ).on('input', function() {
if($(this).val() != "") {
//Do action here like in this example am hiding the previous table row
$(this).closest("tr").prev("tr").hide(); //hides previous row
}else{
$(this).closest("tr").prev("tr").show(); //shows previous row
}
});
Inside your .keypress or .keyup function, check to see if the value of the input is empty. For example:
$("#some-input").keyup(function(){
if($(this).val() == "") {
// input is cleared
}
});
<input type="text" id="some-input" />