I am looking for a way to be able to start typing on a website without having selected anything and then have a specific input field in focus.
Google also employs this feature. In their search results you can click anywhere (defocus the search field) and when you start typing it automatically focuses on the search field again.
I was thinking about jQuery general onkeyup function to focus on the field, any suggestions?
Much appreciated.
You should bind the keydown event, but unbind it immediately so that typing may continue in other text inputs without reverting focus to the default input.
$(document).bind('keydown',function(e){
$('#defaultInput').focus();
$(document).unbind('keydown');
});
See example here.
The answer is as simple as this:
$(document).keydown(function() { $('#element').focus(); });
keydown is preferred after all because keyup will only be fired after the first key is pressed - and respectively not capture the first key typed in my search field.
This solution does not have the problem that #mVChr's solution has: Ie you can click on another input with the mouse and start typing without losing focus due to the keydown-binding.
Also this solution does not remove all the element's keydown-bindings, but uses a named handler instead.
var default_input_handler = function() {
$('.default-input').focus();
$(document).off('keydown', default_input_handler);
}
$(document).on('keydown', default_input_handler);
$('input, textarea, select').on('focus', function() {
$(document).off('keydown', default_input_handler);
});
If planning to do this I'd say use onKeyUp instead of onKeyDown. Its much earlier in the action which would help ease the flow of the interaction.
Related
I have a problem with trigger keypress event in WebDriver with using php. There is element with class > test
On this element bind keypress by jquery . I try to click,but its no result
$this->_city = $this->driver->findElement(WebDriverBy::className('test'));
$this->_city->click()
Plz, help me, who know how to emulate keypress on webdriwer with using php.
$this->_city = $this->driver->findElement(WebDriverBy::className('test'));
$this->_city->click()
$this->driver->getKeyboard()->sendKeys('TEXT HERE'); // this will insert text in the box
$this->driver->getKeyboard()->pressKey(WebDriverKeys::ENTER); // This will do a enter or whatever key you like to press ( not letter/numbers move ARROW_UP or whatever you like to presskey)
Here are some other keys for the driver:
Check out more Keys from WebDriverKey
CHECK getKeyboard() Methods
The only one worked for me is WebDriverKeys :
$driver->getKeyboard()->pressKey(WebDriverKeys::ENTER);
Hope this helps.
You mention a keypress event, so some type of key on the keyboard being pressed is what you are looking for? Using the click() event is emulating a mouse click on the element in question. You will probably want to use the sendKeys() function once the element has focus.
$this->_city = $this->driver->findElement(WebDriverBy::className('test'));
$this->_city->click()
$this->_city->sendKeys('A');
so, I have read just about every question on this subject, but the solutions don't work for my project, it seems that when I change the dropdown, it does the first event, but when I change to a different element it doesn't do anything else, but when I do this with an alert message it changes every time.
here is what I have to demonstrate what I mean
I tried .post it works great until I add php and all the dynamic functions, is it because I used $('#updateDiv').html(url);
I also hide and showed the div based on the change of the dropdown, but all that did was hid and show the div, I want the div to show the content based on a list of categories.
the PHP side will be dynamic, but if I do .html() none of the php renders properly.
http://fiddle.jshell.net/LrxUS/
$.post(url, function(data) {
$("#updateDiv").html(data);
});
As per the fiddle, you have specified
var mydropdown = $('#mydropdown');
but in the change function, you have specified $(mydropdown), either define only id in the variable or the object. Like,
var mydropdown = '#mydropdown';
$(mydropdown).change(function() {}
After that use $.ajax to get the dynamic content.
Ok, lets make it the simplest so that there is no room for mistake in the client side script. Use $.load method defined here.
AS:
$("#updateDiv").load(url);
And don't forget to check what your firebug, chrome inspector or fiddler says about your request in case if you don't get the required result.
I'm creating an inline editable table using jQuery and the editable plug-in.
It works well so far but will only submit and save to the database upon pressing ENTER. I found a thread on here which helped me to tab between boxes but it doesn't submit the data when TAB is pressed.
My code that allows me to switch between boxes is as follows:
$('.editScheduleRow').bind('keydown', function(evt) {
if (evt.keyCode==9) {
var nextBox='';
var currentBoxIndex=$(".editScheduleRow").index(this);
if (currentBoxIndex == ($(".editScheduleRow").length-1)) {
nextBox=$(".editScheduleRow:first"); //last box, go to first
} else {
nextBox=$(".editScheduleRow").eq(currentBoxIndex+1); //Next box in line
}
$(this).find("input").blur();
$(nextBox).click(); //Go to assigned next box
return false; //Suppress normal tab
};
});
To submit using ENTER I use this:
$(".editScheduleRow").editable("../../includes/ajax/save-schedule-row.php", {
"submitdata": function ( value, settings ) {
return { fieldname: this.getAttribute('fieldname'), rowID: this.getAttribute('id') };
},
});
I also found a thread with a suggestion but it didn't work for me: jEditable submit on TAB as well as ENTER
Please let me know if you need any more information.
My original answer was based on reading the documentation of jQuery Editable, which is a jQuery extension that is similarly named, but not the same as jEditable from the question. Let's try again with the correct library.
The problem is that you are moving the focus away from the input box when pressing tab, but when the focus is moved away from it, it doesn't save the contents. To illustrate this, try this: click one of the fields and edit it, then click elsewhere on the document. You'll see that the value in the table - and this is what you where simulating using the blur() jQuery function on the element.
There are (again) two ways to solve this problem. First, we can modify what the program does when a field loses focus:
[..]
"submitdata": function ( value, settings ) {
return { fieldname: this.getAttribute('fieldname'), rowID: this.getAttribute('id')
};
"onblur": "submit";
},
[..]
This has the effect that when doing the experiment I described above to help you understand why it wasn't working, you'll now also see that it gets saved. This may not be what you want. In that case, you can instead make sure that you trigger a submit instead of a blur:
replace this line:
$(this).find("input").blur();
by this one:
$(this).find("form").submit();
Now the experiment will no longer cause the value to be changed, but it's no longer an accurate simulation of what we're doing and when pressing tab the value will be changed.
i create two input text fields , one for title and another for permanent link
i need to update the second filed automatically when user is typing the tilte
how can i do such a thing in jquery /php
somehow im looking for a way to simulate wordpress creation of permanent link in post section
$('#first_input_id').bind('keydown', function(e){
var inputmirror = $('#second_input_id');
inputmirror.val(inputmirror.val() + String.fromCharCode(e.which));
});
Something similar to this should do it.
Write a function to read from the current input, munge it however you like, and insert it into the other input.
Then bind that function to the keypress and change events.
You can intercept keyup event on the first input text, and then update the output of the second input:
$('#titleInput').keypress(function(e) { alert ('typed' + String.fromCharCode(e.keyCode))//update your 2nd input text...
}
Im looking for a way to have a form in cakephp that the user can add and remove form fields before submitting, After having a look around and asking on the cake IRC the answer seems to be to use Jquery but after hours of looking around i cannot work out how to do it.
The one example i have of this in cake i found at - http://www.mail-archive.com/cake-php#googlegroups.com/msg61061.html but after my best efforts i cannot get this code to work correctly ( i think its calling controllers / models that the doesn't list in the example)
I also found a straight jquery example (http://mohdshaiful.wordpress.com/2007/05/31/form-elements-generation-using-jquery/) which does what i would like my form to do but i cannot work out how to use the cakephp form helper with it to get it working correctly and to get the naming correct. (obviously the $form helper is php so i cant generate anything with that after the browser has loaded).
I an new to cake and have never used jQuery and i am absolutely stumped with how to do this so if anyone has a cakephp example they have working or can point me in the right direction of what i need to complete this it would be very much appreciated.
Thanks in advance
I would take the straight jquery route, personally. I suppose you could have PHP generate the code for jquery to insert (that way you could use the form helper), but it adds complexity without gaining anything.
Since the form helper just generates html, take a look at the html you want generated. Suppose you want something to "add another field", that when clicked, will add another field in the html. Your html to be added will be something like:
<input type="text" name="data[User][field][0]" />
Now, to use jquery to insert it, I'd do something like binding the function add_field to the click event on the link.
$(document).ready( function() {
$("#link_id").click( 'add_field' );
var field_count = 1;
} );
function add_field()
{
var f = $("#div_addfield");
f.append( '<input type="text" name="data[User][field][' + field_count + ']" />' );
field_count++;
}
Of course, if a user leaves this page w/o submitting and returns, they lose their progress, but I think this is about the basics of what you're trying to accomplish.
This was my approach to remove elements:
In the view, I had this:
echo $form->input('extrapicture1uploaddeleted', array('value' => 0));
The logic I followed was that value 0 meant, not deleted yet, and value 1 meant deleted, following a boolean logic.
That was a regular input element but with CSS I used the 'display: none' property because I did not want users to see that in the form. Then what I did was that then users clicked the "Delete" button to remove an input element to upload a picture, there was a confirmation message, and when confirming, the value of the input element hidden with CSS would change from 0 to 1:
$("#deleteextrapicture1").click(
function() {
if (confirm('Do you want to delete this picture?')) {
$('#extrapicture1upload').hide();
// This is for an input element that contains a boolean value where 0 means not deleted, and 1 means deleted.
$('#DealExtrapicture1uploaddeleted').attr('value', '1');
}
// This is used so that the link does not attempt to take users to another URL when clicked.
return false;
}
);
In the controller, the condition $this->data['Deal']['extrapicture1uploaddeleted']!='1' means that extra picture 1 has not been deleted (deleting the upload button with JavaScript). $this->data['Deal']['extrapicture1uploaddeleted']=='1' means that the picture was deleted.
I tried to use an input hidden element and change its value with JavaScript the way I explained above, but I was getting a blackhole error from CakePHP Security. Apparently it was not allowing me to change the value of input elements with JavaScript and then submit the form. But when I used regular input elements (not hidden), I could change their values with JavaScript and submit the form without problems. My approach was to use regular input elements and hide them with CSS, since using input hidden elements was throwing the blackhole error when changing their values with JavaScript and then submitting the form.
Hopefully the way I did it could give some light as a possible approach to remove form fields in CakePHP using JavaScript.