I created a search field (id:searchField) and a search button (id:searchButton) using Xpages Custom Controls. I added an onkeypress event on the search field such that it will trigger a click to the searchButton. The searchButton will then reload the page but with url parameters coming from the search field. The problem is that the page reloads but the search parameters are not added to the URL when I press ENTER in the search field, but works properly when I press searchButton. Here are the codes I used:
(code added to the onkeypress of searchField)
if (typeof thisEvent == 'undefined' && window.event) { thisEvent = window.event; }
if (thisEvent.keyCode == 13)
{
document.getElementById("#{id:searchButton}").click();
}
(code added to the onclick of searchButton)
window.location.href = "test.xsp?search=" + document.getElementById("#{id:searchField}").value;
I tested it in IE and Firefox, both have problems. I created a sample HTML file and it worked correctly. Is this a bug of XPages or am I missing something here?
Add this after your '.click()':
thisEvent.preventDefault();
thisEvent.stopPropagation();
It should solve the problem ;-)
Changing the onKeyPress event of the input field to
if (typeof thisEvent == 'undefined' && window.event) { thisEvent = window.event; }
if (thisEvent.keyCode == dojo.keys.ENTER)
{
dojo.byId("#{id:searchButton}").click();
thisEvent.preventDefault();
}
should be sufficient to solve the problem. Note that for cross browser compatibility I've used the
dojo.keys.ENTER
and
dojo.byId("id");
property/ method. The dojo.keys object has a lot more properties to check for certain key presses: see here
Mark
I've done this just recently in an XPage, and the following script works for me cross-browser:
var e = arguments[0] || window.event;
if ( e.keyCode==13 || e.which==13) {
window.location.href = 'searchResults.xsp?query=' +
encodeURI(dojo.byId('#{id:searchInput}').value));
return false;
}
Hope this helps,
Jeremy
Issue is there with the id, generated by xpage. I had a same issue. xPages prefix the id of custom control like view:_id1:_id... Try by giving complete id
Related
I require to test a functionality of an input form, where i have to validate that pressing tab key works through right input fields. I used selenium's action as well as Keys.tab
Actions new tab = new Actions(driver);
newtab.SendKeys(Keys.Tab).Build().Perform();
but due to google chrome version 53.0.2785.116 , its not supporting tab key press and so i want to simulate tab key press through javascript. All the answers only follow to "what to do after" the event is called.
Could anyone give me any insight in this?
EDIT: please note that i need to run this scripts in selenium web driver test. So answers relevant to same would be very helpful.
I did find questions and few confusing answers like
Question A
Question B
I also tried the following solutionLink here but its not working. Does "keyboardEvent" not work anymore? could some one give me a workaround?
Using Jquery you can try:
$("#1234").trigger({type: 'keypress', which: 9, keyCode: 9});
Using JS:
var pressTabKey = new Event('keydown');
document.getElementById('1234').addEventListener('keydown', function() { alert("hi!"); });
document.getElementById('1234').dispatchEvent(pressTabKey);
where 1234 is id of textbox.
In jQuery we use just like follows :
Suppose you have TextBox with Id txtName
$("[id*=txtName]").on('keydown', function(e) {
var keyCode = e.keyCode || e.which;
if (keyCode == 9) {
e.preventDefault();
alert('Tab Pressed');
}
});
I've been experiencing an odd problem with IE10 when redirecting the page on an 'oninput' event (with no equivalent issue when using Chrome). I've produced the most pared-down version of the code that still exhibits the problem, as follows:
<html>
<head>
<script type="text/javascript">
function onChangeInputText()
{
window.location.href = "oninput_problem.html"; // Back to this page.
}
</script>
</head>
<body>
<input type="text"
oninput="onChangeInputText()"
value="£"
/>
</body>
</html>
On my Windows 7 PC using IE10, this code when browsed to (either by double clicking or via Apache) repeatedly redirects as if the act of initialising the value of the input text box itself is generating an immediate 'oninput' event. However, when I change the initial input text box value from the '£' symbol to a letter 'A', the repeated redirection doesn't occur.
I first noticed this problem as part of a project I'm working on. In that case, the user's input should cause a delayed page refresh, which began repeatedly redirecting when I entered a '£' symbol. As I say, the above code is the most pared-down version I produced in trying to track what was causing the issue.
Does anyone else experience this using IE10? If so, can anyone explain why IE10 is behaving this way?
I've found the following that appears to indicate that this may be a bug in IE10:
social.msdn.microsoft.com: Event oninput triggered on page load
Also, there's a follow-up bug report (within the page linked to above):
connect.microsoft.com: onInput event fires on loading the page when input #value is non-ASCII
EDITED TO ADD: At the bottom of the page pointed to by the second link, there's what would seem to be an unhelpful reply from Microsoft stating that they are unable to reproduce the bug described, so it may be a while before the issue is fixed...
There's anoter bug report which is still open :
http://connect.microsoft.com/IE/feedback/de...
For anyone who might encounter this, you can use this "class" as an alternative to the onInput event.
const getFieldWatcherInstance = (function(watchedElement, onElementValueChange){
let intervalReference = null;
let lastValue = null;
if(!watchedElement instanceof Element) return new Error('watchedElement is not an HTML Element');
if(typeof onElementValueChange !== 'function') return new Error('onElementValueChange is not a function');
return {
toggleFieldWatching : function(){
if(intervalReference){
clearInterval(intervalReference);
intervalReference = null;
}
else{
intervalReference = setInterval(function(){
const currentValue = watchedElement.value;
if(lastValue !== currentValue){
onElementValueChange(currentValue);
lastValue = currentValue;
}
}, 100);
}
}
};
});
Set it up like this:
const myInputChangeWatcher = getFieldWatcherInstance(<**insert real element reference here**>, function(newValue){
console.log('The new value is: ' + newValue);
});
call myInputChangeWatcher.toggleFieldWatching() in the onfocus and onblur events of the input
This is a odd behavior that seems to only happen in Chrome and with JQuery UI. When entering characters into a password field at first everything functions correctly. However, if you attempt to backspace to the last letter in the input, the browser locks up all client side operations. Also, if you try and highlight the characters entered and backspace the client side operations freeze.
Just reaching out to see if anyone has encountered this same issue, and how they resolved it.
In order to experience the issue, we have the dialog auto opening on 2+ unique page home views. Here is a listings page so it can be triggered, I apologize for the inconvenience but I can't remove the counter.
Page: http://www.christineleeteam.com/area/eagleharbor
I had the same problem but cache clearing didn't help. I'm sure it isn't a jquery ui bug.
Here is my solution:
$('input[type="password"]').on('keydown', function(event){
if (event.which == 8) { //backspace event
event.preventDefault();
$(this).val('');
}
});
This code is clearing the whole password field on one backspace event.
We encountered the same issue, and used Benkod's solution.
We improved it a little to also handle cases where the password text is deleted with the delete key (and not backspace).
Another case is when all the text in the control is selected and new text is typed to replace it.
Here is the script we used:
Sys.Application.add_load(function() {
$('input[type=password]').keydown(function(event) {
var isAllTextSelected = this.value.slice(this.selectionStart, this.selectionEnd) == this.value;
var isLastChar = $(this).val().length == 1;
if (isAllTextSelected && $(this).val().length > 0) {
$(this).val('');
}
if ((event.which == 8 || event.which == 46) && (isLastChar || isAllTextSelected)) { //backspace event
event.preventDefault();
$(this).val('');
}
});
});
Same problem here (FWIW, I'm using Twitter Bootstrap, but the issue was the same). It looks like it's caused by having a lot of content preceding the input. Placing the input higher--above the bulk of other content--did the trick for me. A work around, but better than nothing.
Can we detect whether a browser supports dropping a file over an <input type="file" />?
For example, this is possible in Chrome but not in IE8.
Modernizr.draganddrop is a possibility but is it the right choice? I'm not adding any custom drag/drop event handlers.
Update
To verify Joe's answer here's a jQuery example that should stop the file drop. Verified in Chrome and Firefox.
$yourFileInput.on('drop', function() {
return false; // if Joe's explanation was right, file will not be dropped
});
I think the answer to Detecting support for a given JavaScript event? may help you. Adjusting the code to test against Input instead of Div, and testing for the "Drop" event seems to work fine for me.
Reproduced here so you don't have to click through (and adjusted slightly, since it seems you only need to detect this one feature):
function isEventSupported(eventName) {
var el = document.createElement('input');
eventName = 'on' + eventName;
var isSupported = (eventName in el);
if (!isSupported) {
el.setAttribute(eventName, 'return;');
isSupported = typeof el[eventName] == 'function';
}
el = null;
return isSupported;
}
if(isEventSupported('drop')){
//Browser supports dropping a file onto Input
} else {
//Fall back, men!
}
I have the following weird issue with the "loading gif" that I want to display in my search bar when the user hits enter. The code works on mozilla and ie 7 on the localhost but only on mozilla on my cpanel...
Do you have any clue?? Sorry if this looks obvious :)
here is the code, the path is dynamic but of course correct:
$('#searchField').focus(function(){
$(this).keypress(function(event) {
if ( event.which == 13 ) {
$(this).css('background-image', 'url("/dvt/public/images/ajaxLoader.gif")');
}
});
});
thanks a lot
Put this to get your event :
if (!event)
var event = window.event;
var code = event.which || event.keyCode;
It's different in IE and firefox
As far as your image, it seems to me that the URL to the image would be /images/ajaxLoader.gif as /dvt/public seems like a doc root path. With the image on your server, what URL do you put in the browser view it? Also, you can pull the double quotes out of the url() in the CSS.
For the event and keycode, change the name of your event parameter (try e for starters) to avoid collision with the global namespace, then use e.which, per the jQueryfn.keypress docs.