Just like title says, I'm trying to keep the input text focus still when click on one div.
Specifically I'm trying something like what happens in Google Livesearch (Not Instant Search) (When you type there, shows a ten items list.) (I can't put an image).
When you click on "Google Search", still keeps input text focus.
I'm trying but always lose the input text focus.
Someone knows how to achieve this?.
P.S: With click I mean the mousedown event.
Thanks in advance.
You can try to refocus on your text input when a mousedown event is caught on your division.
Here is a quick example using jQuery:
$("#my-division").on("mousedown", function (evt) {
$("#my-input").focus();
});
Check this solution:
First, store the last focused element:
var lastFormElementFocused = 'my-first-element-id';
$(document).on('focus', '.your-class', function() {
lastFormElementFocused = $(this).attr('id');
console.log(lastFormElementFocused);
});
After that, in your onClick event:
$(document).on('click', "div.your-class", function() {
$("#" + lastFormElementFocused).focus();
var element = $(document.activeElement);
// Do with 'element' what you want
});
Note that you need to have an assigned id in each element you focus.
Related
I am using EasyAutocomplete, it works well, only problem I am facing - Input box loses control when EasyAutocomplete is attached to it.
I want EasyAutocomplete to get activated after the user has typed 2 characters.
When I type 1 character nothing happens as needed, but after 2nd character has been typed EasyAutocomplete must get attached and should start working. However, what happens is I have to click outside of the input box to make things happen.
It is just this 'outside click', that I have to do to make this plugin work, is problematic for me.
I have tried input event as well but i did not work as required.
The change event seems quite suited for my requirement.
How do I solve this issue?
var ib = $("#inputbox");
$(document).on("keyup", ib,function(e) {
leng = ib.val();
});
$(document).on("change", ib,function(e) {
if(leng.length < 2){
#do something
}else{
ib.easyAutocomplete(options);
}
});
First you should change "change" by "keyup"
Second leng doesn't update as you put it outside of the event
Lastly an event on document may not be the best if you want this event to trigger only on this element, change document by your element
$("#inputbox").on("keyup", ib,function(e) {
if($("#inputbox").val().length < 2){
#do something
}else{
ib.easyAutocomplete(options);
}
});
I'm making a chrome extension, and I made a context menu option.
I want to get the focused input field and change it's text.
That's what I have so far:
function click()
{
var $focused = $(':focus');
$focused.val("test");
}
chrome.contextMenus.create({"title": "Paste", "contexts":["editable"], "onclick" : click});
But it doesn't change the input field's text, what do I need?
I added an alert("test"); to the click() function and it worked.
It is likely that focus is simply being stolen by the plugin button you click :)
Can you try setting a specific field value, using an ID or name select, to check your DOM access? Once you confirm that I suggest you use another event such as
$(document).on('focus', 'input', function(e){
// set field here
$(this).val("test");
});
to catch focus changes.
I have following jquery code, where on click of a check box I will show a popup value.
Except in IE,in all other browser it works as expected. That is, on change the check box will be checked and the popup will be opened.
However in IE8 its not getting checked, however popup is displayed properly.
Code :
$('#TAndC').change(function(){
if( $('input[name="TAndC"]').is(':checked'))
{
$('#TandCBox').show();
var termsandcondition = GetEnum().TermsandConditionsPageId;
var actionURL = '#Url.Action("ShowTAndC", "Account", new { isFromCheckBox = true })';
$('.popUpForm').load(actionURL);
var msgBox = $('#terms').attr('href');
MaskMsgPopUp(msgBox);
return false;
}
});
If your element is a checkbox and not a dropdown then use click anyway.
If your selector is referring to a dropdown use click if you need to support IE8 and older.
See why that is below.
According to the MSDN for change/onchange, the event is not triggered until the change is committed.
In addition the event is also not triggered when the value is changed programmatically.
To quote:
This event is fired when the contents are committed and not while the
value is changing. For example, on a text box, this event is not fired
while the user is typing, but rather when the user commits the change
by leaving the text box that has focus. In addition, this event is
executed before the code specified by onblur when the control is also
losing the focus. The onchange event does not fire when the selected
option of the select object is changed programmatically. Changed text
selection is committed.
To invoke this event, do one of the following:
Choose a different option in a select object using mouse or keyboard navigation.
Alter text in the text area and then navigate out of the object.
If you must support IE8 and older, you are probably better of to use the click event instead which get's triggered when you release the mouse and your new choice is selected.
instead of .change use below code and try
$(document).ready(function(){
$(document).on('click','#TAndC',click_function){
if( $('input[name="TAndC"]').is(':checked'))
{
$('#TandCBox').show();
var termsandcondition = GetEnum().TermsandConditionsPageId;
var actionURL = '#Url.Action("ShowTAndC", "Account", new { isFromCheckBox = true })';
$('.popUpForm').load(actionURL);
var msgBox = $('#terms').attr('href');
MaskMsgPopUp(msgBox);
return false;
}
});
});
I am trying to add some content into a textarea after the user has clicked on the "Add" button but nothing is happening. Is there anything I am missing?
Below is the jquery code which adds the selected content:
$(".add").on("click", function(event) {
console.log("clicked");
//lets get our Question Text...
var theQuestion = $("td:first-child", $(this).parent()).text();
//the row is present, let's then make sure that the proper cell gets oru data.
if ($('.activePlusRow').length > 0) {
$('.activePlusRow').next('.textAreaQuestion').val(theQuestion);
$('.activePlusRow').removeClass('activePlusRow');
}
});
$(".plusrow").on("click", function(event) {
//adding a unique class for the purpose of the click.
$(this).addClass('activePlusRow');
});
Below is the textarea:
$('.questionTextArea').each( function() {
var $this = $(this);
var $questionText = $("<textarea class='textAreaQuestion'></textarea>").attr('name',$this.attr('name')+"[]")
.attr('value',$this.val());
});
EDIT:
You can use the application to see for yourself. Below is how to use app:
When you open the app click on the "Green Plus" button. A modal window will appear.
In the search box enter in "AAA", then click "Search".
Results of your search is displayed. Here is where the problem is. What I want is that when the user clicks on an "Add" button to add a "Question", it should close the modal window and add the "Question" into the top textarea, but it is not doing this.
Textareas unlike inputs don't use the value attribute to store there data, which is probably why attr('value', 'bla') is failing.
I believe the .val() method will automatically take this in to account and thus work anyway.
Try somthing like:
var $questionText = $("<textarea class='textAreaQuestion'></textarea>").attr('name',$this.attr('name')+"[]").val($this.val());
We have a lot of inputs in a document.
We want to open a dialog that generates text and puts that in the currently focused input.
The problem is that, when I click a button or anything else to open the dialog that input loses focus. I can't determine which input has to get the generated text.
$("#button").click(function(){
// something should goes here to prevent stealing inputs focus
});
Is there any solution to prevent stealing focus by that special button?
You could not use a form button and just use say a <span> make it behave like a button?
UPDATE:
You could use something like
$('span').hover(function(){
focused_element = $("*:focus").get(0);
});
$('span').click(function(){
focused_element.focus();
});
Check out my fiddle
Does your field have a unique ID? If it does, use that ID to set the focus back to the field when the dialog's save/close button is clicked.
Don't worry about having the focus stolen as much as resetting it once you are done.
My solution would be to handle every focus and save it in focusEle:
$(function () {
var focusEle;
$('*').focus(function () {
focusEle = this;
});
$('button').click(function (e) {
console.log(focusEle);
var c = confirm('Love the cat :3?');
$(focusEle).focus();
});
});
With HTML as:
<input type="text">
<button>Press me!</button>
Example is working: http://jsfiddle.net/76uv7/
Depending on #ggzone idea