I am looking through the samples and I have got solution for focusing on dom element using tab.I am trying to focus on textarea which is on site,
so i had used virtual Tab key press to find that particular textarea and its working correctly.
But can anyone suggest how to directly focus on textarea. I also used excuteJavascript function but its not working.
DotNetBrowser DOM API provides two methods: DOMElement.Focus() and DOMElement.Blur(). This functionality allows you to request focus on particular HTML DOM element.
Related
I'm making reusable Web Components containing shadow DOM and am currently having trouble with focus.
I have a component containing a native input and some text.
I'm trying to have the following working:
Calling .focus() on the component will focus its inner native input
Using the attribute tabindex works
Pressing "tab" does not focus the component, but rather its inner native input
Highlighting the text is allowed (using the mouse mousedown + drag)
Here are some things I tried:
https://codepen.io/Spirielle/pen/RwBwJNY
Initially I was using delegatesFocus on the component shadow DOM. It works well for focus and tab, but makes the text inside the component unselectable.
Then I tried to remove delegatesFocus and instead call the inner input focus method whenever focus was called on the component, but now I have to press tab twice when the attribute tabindex is set on the component.
Someone gave me a good-enough solution, so I thought I'd share :)
We bind on onfocus instead of focus
this.onfocus = opts => {
inner.focus(opts);
};
It's not perfect since we need to click twice in the text to highlight it, but otherwise all 4 mentioned use cases work.
I updated the codepen with this solution.
https://codepen.io/Spirielle/pen/RwBwJNY
Feel free to suggest something else or comment if something terrible could happen with this approach.
I'm displaying an array in HTML page. On a text column when onfocus event is fired i display the text in CKedit using CKEDITOR.replace('#elementId').
I would like hide the CKeditor once the element is not anymore selected (using onblur event) and display unformated text as it was before selecting the element.
Does anyone know how to do that?
I think, only way is destroy instance of CKEditor
CKEDITOR.instances["YourInstanceID"].destroy();
You can recreate instance again, when needed
CKEDITOR.replace("YourInstanceID")
But, may be you should check inline version:
CKEditor inline example
I think most convenient will be using inline editors. Which only appear when user select specific element.
Another option is replacing editor after event and destroy it in other way. But this approach might be a little bit laggy, because editor should be properly destroyed and recreated, what might be time consuming for a browse. Here is an example on doubleclicking the divs, similar approach you could be able to use for focusing and bluring.
Thans for your answers.
I finaly simply added or removed ckeditor editor class in the textarea tag.
I have a JSF page where I'm trying to tie the text in specific paragraphs to the contents of a set of textareas.
Getting the content to change when a textarea changes is dirt simple using onchange and onkeyup events:
onchange="$('dynamicParagraphId').text($(this).val());"
Unfortunately, I'm having some trouble initializing the paragraphs so that their text matches the textareas when the page is initially loaded.
Because of how the page is implemented, editing the underlying HTML is bloody difficult; I'm not sure how to implement an obvious solution like a script that triggers when the page loads, because it's going to take some real work for me to get a hold of the textareas' IDs. Is there some way to insert Javascript/jQuery code into the textarea definition that will trigger when the page loads so that I can make use of the this object and not have to figure out the textarea ID? Is there some feature of jQuery I can leverage that spares me needing to know the IDs?
Trigger the keyup event for all textareas, but you can probably come up with a more specific selector:
$(document).ready(function(){
$("textarea").keyup();
});
Or if you can only attach functions through inline markup for some reason you can add it to the <body>:
<body onload='$("textarea").keyup()'>
If you know how many textareas there are and which you want (i.e. the 5th on the page), you could easily query for all textareas:
document.getElementsByTagName("textarea");
and select the one you want. Another solution is to hand over the control to JS and render the textarea on the clientside.
http://jsfiddle.net/FExQy/
I have a page with an input box, and a function that processes the value of this input box and produces piece of text. I want this text to always be up to date in relation to the contents of the input box, so I've attached a couple of event handlers to it with jQuery to catch any changes:
$('#input').bind('keyup cut paste', function(){...});
This works well in most cases. Whenever the user modifies the contents using the keyboard in any way, or right-clicks to use the cut or paste functions, the text is updated immediately. However, there are two events I still haven't figured out how catch, if it's even possible to do so:
When the user selects a of text and drags it do a different position in the input box
When the user uses the Delete action in the right-click context menu
Both of these can of course be detected by binding the change event, but the problem with that approach is that it doesn't fire until the input box loses focus. The whole point of these bindings is to have the text update in real-time as the value of the input box changes, so change is no good.
English is my second language so I could simply be bad at wording my Google searches, but so far they've turned up nothing. I haven't found any solutions to this after digging through a couple of related Stack Overflow pages either, so I'm asking here. Is there an event binding for this that I don't know of? If not, is there a different approach I could take? Or is this simply not possible with plain JavaScript?
In non-IE browsers, you can handle the input event.
In IE, you can handle the propertychange event.
Demo (works in all browsers)
It's possible this SO question (and related jsfiddle) might answer your question.
(On the linked jsfiddle, put text in the top box to test)
In other words, bind to mouseup and mousedown, etc.
If you can't find a combination of events that cover all cases, you may want to use setInterval(function() {... }, period). You could play around with the period to see how well this works.
I have some questions about focus in general (adhering to WC3 format, screw IE). I'm having problems with unintended actions occurring on a widget i am building (using the Dojo Toolkit), and i believe a better general understanding of focus will allow me to solve my problem myself, so here goes:
First of all, which common HTML element are and AREN'T focusable? I've been trying to throw focus around and it works sometimes, and doesnt work other times...
What is the 'highest' level focusable on a page? For instance, can i focus the window? The <body> tag? Specific to dojo, can you focus an entire widget? If the template is widgeted can you focus just highest level of the template (usually a <div>)?
Can focus be 'removed'? Can i remove focus from all elements/objects on the page until the next object is focused? Can i prevent a element from being focusable (like a button)?
What are all the methods through which i can affect focus? Besides calling the focus() method on elements, can focus be set through HTML attributes or in a CSS?
Thanks in advance for what i hope to be some great answers!
Disabled controls can't receive focus according to the HTML4.01 spec
Firefocus, an extension that works over Firebug, could be a great enhancement if you're asking this sort of questions :) Install, restart and look at the Console
Related to focus is the order in which elements are given the focus, that is the order of tabbing navigation and the tabindex attribute with its values -1, 0 or positive when it exists
Any DOM element can receive focus amongst other some event handlers.
See answer 1.
Focus is passed around and not removed.
Focus can only be set by the DOM using JavaScript.
You can also use dojo.place to put things in the correct for focus.