I have this code http://jsfiddle.net/xNHKP/6/ (not working in the fiddle for some reason which i dont get, but it works on my site - http://bit.ly/JV5I0Z )
What i want is that the contact form (click last menu item to make it appear) can be dragged, but when someone drags or clicks on the text fields, they do not gain focus and so you can't type in them. Ironically, it works on internet explorer.
So how can i make the fields gain focus when clicked on? I don't mind making them non-draggable.
Thanks
edit: code below (tried to keep it as simple as possible, including only the relevant stuff)
dragDrop = {
initialMouseX: undefined,
initialMouseY: undefined,
startX: undefined,
startY: undefined,
draggedObject: undefined,
initElement: function (element) {
if (typeof element == 'string')
element = document.getElementById(element);
element.onmousedown = dragDrop.startDragMouse;
}}
<form id="contactForm" onSubmit="return sendMail();">
<textarea id="message" rows="8"></textarea>
</form>
<script type="text/javascript">
dragDrop.initElement(document.getElementById('contactForm'));
</script>
Okay, seems you're struggling with it, here's what would I do considering what you want :
addEventlistener to your form, make it not bubble so if you click on an inner element it doesn't trigger.
let every inner element live it's life like usual, don't try to add messy events on them.
If you really want/need the user to be able to drag the form by dragging on a label or something you should explicitely filter what are the draggable elements. Then you can go back to a bubbling event and filter out what's not draggable. If it's not draggable, don't do anything else than a return so you don't have trouble with text selection.
Here's a fiddle
Okay, so here is an answer : you just have to check that it's the form being dragged and not any other of it's inner elements so just edit your code like so :
dragDrop.startDragMouse = function(e) {
dragDrop.startDrag(this);
var evt = e || window.event;
// Now check it's the correct element we're dealing with
if(evt.target.id==="contactForm") {
dragDrop.initialMouseX = evt.clientX;
dragDrop.initialMouseY = evt.clientY;
addEventSimple(document,'mousemove',dragDrop.dragMouse);
addEventSimple(document,'mouseup',dragDrop.releaseElement);
}
return false;
}
In Firebug I can see that as soon as you click on a form elemment it assigns a 'dragged' class to the form and when the mouse button is released the class is removed. You need to be assigning the 'dragged' class when the mouse button is pressed and the mouse is moved.
Related
i have a mainbox inside which some more boxes are dynamically generated.
// first time retrive
$.post("dataretrive.php", {
}, function(data, status) {
document.getElementById('mainbox').innerHTML = data;
timer();
});
then on click on these subboxes some i am implementing some functionality
$('.boxes-main').unbind('click').on('click', '.subbox', function(e){
var value1 = $(this).attr('data');
var value2 = $(this).attr('data2');
var value3 = $(this).attr('data3');
var value11 = $(this).attr('data4');
var value12 = $(this).attr('data5');
var value13 = $(this).attr('data6');
...... // some more functionality with these data which i think doesn't matter for this question for this question
});
As i want to implement shortcuts to these subbox like when user press 1 it trigger a click event on that box. I also have ID's associated with that. like box1 , box2, box3 and so on. and i am trying to put a click event of that box when key 1 is pressed.
$(document).keypress(function(e) {
if(e.charCode == 49) {
$('#box1').click();
}
});
I had also tried trigger function , $("boxes-main #box1').click(); but nothing works because contents are dynamically generated. someone tell me please how to implement manual click event on dynamically generated element.
and don't get confused between boxes-main and mainbox both are class and id of same div element.
Based on your comment:
and don't get confused between boxes-main and mainbox both are class
and id of same div element.
It is not the click generation that is broken, but you are targeting the wrong ancestor in your delegated click event handler. Go higher up the ancestors to a non-changing element. document is the best default if nothing else is closer.
$(document).on('click', '.subbox', function(e){
Notes:
Don't mix bind with on. Use off instead
You don't need off/unbind at all in this example
I have an ASP.NET page with a Telerik RadEditor (rich text box). When tabbing through a page, when a user gets to the text box, focus gets set to the various toolbar icons before it goes to the textarea. I added some jQuery to one page to set the focus on the text area when tabbing out of the last cell on a form:
$('input[type=text][id*=tbCost]').keydown(function (e) {
var keyCode = e.keyCode || e.which;
if (keyCode == 9) { //If TAB key was pressed
e.preventDefault();
var editor = $('body').find("<%=RadEditor1.ClientID%>"); //get a reference to RadEditor client object
editor.setFocus(); //set the focus on the the editor
}
});
I am looking for a way to implement this functionality in the control so that it will work regardless of the page it is on. For example, in the above code, focus is only set if the user is tabbing out of the tbCost cell. I would like to be able to set the focus to the text area when a user tabs into the toolbar items.
Is there any way to detect when an element is about to get focus? I know I can see if an element has focus, but I can't think of a way to implement this functionality.
Thanks
Solution:
If anybody has this same question in the future and wants an example, here is the code I used:
$(document).ready(function () {
$('.reToolCell').focusin(function () {
var editor = $('body').find("<%=RadEditor1.ClientID%>");
editor.setFocus();
});
});
You might consider binding to a focus on the toolbar icons and redirecting focus to the text area. Although this might have unintended side effects if users are trying to tab-focus these tools in order to use them.
//on focus eventHandler for all your icons that calls a function
#('.elementtype, class or a generic way of identifying the icons'.onfocus(myFunction(this))
//the function take a parameter of your element, moves to the next sibling element and sets the focus
myFunction = (element) {
element.next().focus();
}
I want to use the arrow keys to navigate between the input text fields in my form (next, previous). I found this simple method to implement it: link to it but for me it doesn't work... I tried it in the HEAD and in the BODY after the FORM as well, but no luck...
I think the problem could be, that my form is send back to the page via AJAX...
I'm not that familiar with jQuery, can someone please help me out here?
This is the jQuery code:
<script>
$(document).ready(function(){
$('input').keyup(function(e){
if(e.which==39)
$(this).closest('td').next().find('input').focus();
else if(e.which==37)
$(this).closest('td').prev().find('input').focus();
else if(e.which==40)
$(this).closest('tr').next().find('td:eq('+$(this).closest('td').index()+')').find('input').focus();
else if(e.which==38)
$(this).closest('tr').prev().find('td:eq('+$(this).closest('td').index()+')').find('input').focus();
});
});
</script>
if your inputs are dynamically created after domready event you should change
$('input').keyup(function(e){
...
into
$('body').on('keyup', 'input', function(e) {
...
doing so the keyup event will be captured on body element using event delegation
For further info see the documentation here: http://api.jquery.com/on/
Event handlers are bound only to the currently selected elements; they must exist on the page at the time your code makes the call to .on(). To ensure the elements are present and can be selected, perform event binding inside a document ready handler for elements that are in the HTML markup on the page. If new HTML is being injected into the page, select the elements and attach event handlers after the new HTML is placed into the page. Or, use delegated events to attach an event handler...
If your script is loaded before the form is on the page then the keyup binding would not be able to bind on load. Try using:
$('input').live('keyup', function(e) { code here });
Just in case you want to bind more than one event, this is how you do it:
$('body').on({
'keyup' : function(e) {
...
},
'keydown' : function(e) {
...
}
}, 'input');
Also 'body' can be swapped with any parent element of 'input' that will not be dynamically added to the page (i.e. it exists on page load). So if you have some div containing each input, you might want to bind that instead.
I've got a slight improvement to the code above. The problem with the code is that you cannot navigate inside an input field. E.g. you have a value of '100.00|' with the cursor currently at the end (indicated with |). If you press the left key it will jump to the prev input field instead of moving the caret by one position to '100.0|0'.
In order to do that you need to check the current caret position with e.target.selectionStart. But you also need the prev caret position as otherwise you can't identify whether the caret went from 1 to 0 (no jump) or the caret was already on 0 and the user pressed left again (jump).
Another change I've added is that only input fields with the class tableInput are considered. In case you want to exclude some fields.
function(e){
var charPos = e.target.selectionStart;
var strLength = e.target.value.length;
var prevPos = $(this).data('prevPos');
if(e.which==39){
//only go right if we really reached the end, that means the prev pos is the same then the current pos
if(charPos==strLength && (prevPos ==null || prevPos == charPos)){
$(this).closest('td').next().find('input.tableInput').focus();
$(this).data('prevPos',null);
}else{
$(this).data('prevPos',charPos);
}
}else if(e.which==37){
//only go left if we really reached the beginning, that means the prev pos is the same then the current pos
if(charPos == 0 && (prevPos ==null || prevPos == charPos)){
$(this).closest('td').prev().find('input.tableInput').focus();
$(this).data('prevPos',null);
}else{
$(this).data('prevPos',charPos);
}
}else if(e.which==40){
$(this).closest('tr').next().find('td:eq('+$(this).closest('td').index()+')').find('input.tableInput').focus();
$(this).data('prevPos',null);
}else if(e.which==38){
$(this).closest('tr').prev().find('td:eq('+$(this).closest('td').index()+')').find('input.tableInput').focus();
$(this).data('prevPos',null);
}
});
Our website involves some javascript that produces overlay modal windows.
There is one accessibility problem with this though, once the modal is triggered, the focus is still on the trigger element and not on the modal itself.
These modals can include all sorts of html elements, headings, paragraphs and form controls. What I would like is the focus to begin on the first element within the modal, so most likely to be a h4 tag.
I have explored using the focus() function however this does not work with a number of html elements.
One thought was to add an empty a tag in the window which could gain the focus, but I am unsure about this method.
very late to the party, but the existing answers do not respect accessibility.
The W3C wiki page on accessible modals offers more insight than what's asked in the OP, the relevant part is having tabindex=-1 on the modal container (which should also have an aria-dialog attribute) so it can get :focus.
This is the most accessible way of setting the focus on the modal, there is also more documentation about keeping it in the modal only - and returning it to the element that triggered the modal - quite a lot to be explained here, so I suggest anyone interested to check the link above.
You can append textbox to the beginning of the modal HTML, set focus then hide the textbox. Should have the desired effect as far as I understand your needs.
You could try to blur() the element that has the focus.
to trap focus inside the modal I have used this approach. So the basic idea behind it is exactly to trap the focus in the modal HTML elements and not allowing it to go out of the modal.
// add all the elements inside modal which you want to make focusable
const focusableElements =
'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])';
const modal = document.querySelector('#exampleModal'); // select the modal by it's id
const firstFocusableElement = modal.querySelectorAll(focusableElements)[0]; // get first element to be focused inside modal
const focusableContent = modal.querySelectorAll(focusableElements);
const lastFocusableElement = focusableContent[focusableContent.length - 1]; // get last element to be focused inside modal
document.addEventListener('keydown', function(e) {
let isTabPressed = e.key === 'Tab' || e.keyCode === 9;
if (!isTabPressed) {
return;
}
if (e.shiftKey) { // if shift key pressed for shift + tab combination
if (document.activeElement === firstFocusableElement) {
lastFocusableElement.focus(); // add focus for the last focusable element
e.preventDefault();
}
} else { // if tab key is pressed
if (document.activeElement === lastFocusableElement) { // if focused has reached to last focusable element then focus first focusable element after pressing tab
firstFocusableElement.focus(); // add focus for the first focusable element
e.preventDefault();
}
}
});
firstFocusableElement.focus();
you can find it here trap focus inside the modal
Either by double click or move the mouse.
Anyone knows about this?
Maybe you can bind a function to document.onmouseup to call document.getSelection()? This is assuming your users use mouse to select the text ;)
document.onmouseup = function() {
var sel = document.getSelection();
if (sel.length > 0) {
alert(sel);
}
}
I think that you refer to the selectevent. See here: http://www.comptechdoc.org/independent/web/cgi/javamanual/javaevents.html
Could it be document.getSelection()?
Here's a web page on that subject.
It's possible to use "onselect", but it works just for form elements (inputs, selects...).
function on_select() {
alert( "selected" );
}
...
<input name="input" onselect="on_select()">
In IE only the select event applies to body text as well as form inputs, so would do what you want. IE and WebKit have selectstart which fires when the users starts selecting, which probably won't help you. To detect when the user has made a selection in a cross-browser way you will need to handle both keyup and mouseup events. Even then you won't be detecting selection events such as the user using the "Select all" menu option (usually found in the Edit and right click context menus). The situation is not ideal in current browsers.