SelectionStart SelectionEnd Range - javascript

I'm analyzing a piece of software made by others, it's called Editarea. This software is made in Javascript and it colorizes the word step by step while you're typing. This is the most useful feature of this software for me, as I have to make an editor which colorizes the words in real time. The problem is that I cannot understand "HOW" this task is being done by the javascript editor of editarea.
Is it possible to perform a real time color of a text in javascript without actually using onkeypress or onkeydown events? Or, for being more specific, is it possible to perform it by selecting a portion of text with a selection object or a range object depending of which browser the user is using?
I'm wandering because a cannot use a debugger(the script is all included in a string in the original version) so it's very hard to understand where the script i'm modifing is changing the color of the text.So I'm only asking if it can really be done only with a selection object or you absolutely need an onkeypress or onkeydown event to perform the task.
Thank you all for the answer.
Agnese

I don't have time to dig through their code, however, I can give you a clue as to where to look.
There is an obfuscated area of code in the form of a literal string being evaluated when the code runs, at the bottom of the 'edit_area_full.js' file. Take this code and look for everywhere either JQuery or raw Javascript is using this DOM element. I bet at some point, an event handler is being added dynamically when this code runs during the body 'onload' event.

Related

How to fire a DOM event with YUI3

I've encountered an annoying issue while working on YUI.
I have a main area and a navigation block. The elements in the main area can be activated with a direct click or by clicking an element in the navigation block that triggers the appropriate element in the main area.
As it turns out, triggering a click event programmatically in YUI isn't as simple as I thought it might be. Looking at the documentation I found pleanty of information on how to attach and delegate events but not how to call one.
I found this question, but it deals with creating a new custom event and not calling an existing one.
All other similar questions are answered with using .simulate(), but this is actually not the best option for compatability reasons and it's also not recommended by YAHOO itself for client-side use http://yuilibrary.com/yui/docs/event/simulate.html#faking. EDIT: After re-reading the section I realized the warning is irrelevant for the subject of this question.
I found a solution by calling the click() command in the node's DOM element, but this is really a last resort and I would like to know if there's a more "clean" way to do it through YUI.
Here is an example of what I'm doing now: http://jsfiddle.net/3fso2dg8/
In the example, the second button is triggering the click event of the first button by using the DOM element
Y.one('#clickme')._node.click();
CONCLUSIONS
After more fiddling with the code I came to realize simulate() is the preferred option in most cases, but not all.
The YUI vesrion I'm required to work with (3.14) has a known issue on simulating a click event in IE9 and above. Since - for other technical reasons - I cannot upgrade to whatever version this issue was fixed and I need to keep a multi-platform compatibility, my original solution is still the best option. Anyone else that uses YUI components that don't respond well on IE, maybe you stumbled upon the same issue so this is one way to solve it.
After looking for exactly the same functionality I just used simulate in user-facing code - where It would just mimic clicking with no return method etc. (simple submit button or choose fil trigger).
When I would needed "complex" functionality I would just add a class or new ID and add new delegate or "on" method in my code - following the: "If a function needs to respond to user action or be called programmatically, it should be written accordingly and called directly in the latter case." prinsipp.
So to summarize - I use simulate for very simple effects with no callbacks or other "advanced" stuff and (sadly) duplicate other delegate/on elements where simulating would be tricky...
Had also looked into your method (._node.click();) and I can't see no obvious difference comparing to simulate()...

HTML simulate textarea with div container

I want to create a little WYSIWYG editor.
The idea:
First I want to add the feature to write and change text. So I add an onClick and onKeyBoard Listener to my div container. When I click the div I set a varaible named "focused" to true. When an key event is fired I check if focused is true. In case focus is false nothing will happen else the new charater will be added on the cursor's position.
My questions:
Is this the right way? I tried to check how other editors handle the text input but I wasnt able to get it.
In case this is the right way - how can I simulate a blinking cursor. In a textarea the cursor will blink but who about a div container? The cursor will hide immideatly after clicking.
I'm assuming you're doing this for fun/practice. If you're doing this for professional reason then I HIGHLY recommend you don't reinvent the wheel and use something like Ckeditor, tinyMCE or YUI.
That being said; you need to look into event handling. Specifically, for your question about focusing, you can look here. The way you're describing (setting a variable to true/false) seems like it is going to just run into problems. If you use the standard events attribute (as opposed to setting a "focus" variable onclick) you should define functions to execute and then set them as an onfocus/onblur attribute for the element you're listening to.
That is if you aren't using a javacript library like mootools, jquery, extJS, etc. If you're using one of those they likely have their own way of handling events, so you should search their respective documentation for how to implement event handlers.
One more note; you really should be using a textarea over a div (unless I'm misunderstanding and you just want to do something when a user focuses on your div). If you're using javascript only to completely reinvent a texteditor from a div; then your web page will not function without javascript. If you keep the text area; users could still type information in and you still get the benefit of grabbing text contents for form submits but using divs means your web page will just be rendered useless without javascript.

What is triggering the "Tags" section of Stackoverflow?

Been looking for hours. At https://stackoverflow.com/questions/ask how does the "Tags" section make the blue boxes appear below?
I don't think they are using keyup event trigger, since the blue boxes are not being updated on every keypress.
You can test this by going to https://stackoverflow.com/questions/ask and typing:
"aadfadasdfasdfasdfasdfasfasdfsaf"
As you type, you will notice that the blue box "aadfadasdfasdfasdfasdfasfasdfsaf" will only appear a few seconds AFTER typing. Not during.
They probably call setTimeout and clearTimeout to run their code 1 second after the last keyup event.
It's just a case of autocomplete. There are many ways of accomplishing this.
One way is to store the list of words to autocomplete on the client end. This is very fast and there won't be any delay (unless you program one in).
The other way is to make an AJAX call to the server and have it return a list of autocomplete words. This is how SO does it. Since you don't want to make an ajax call every time the user types in a letter, there is a delay implemented to save bandwidth and improve performance.
If you want to implement a similar feature on your own website, I suggest looking into jQuery plugins to achieve this as there are many freely available ones out there.
EDIT: The trigger is likely a keyup event as you mentioned. However the trigger will likely wait for a second or so using setTimeout() before showing the list of possible autocompletes. clearTimeout() is used if another key has been pressed during the delay to prevent multiple calls from being made.
Check out the source code using Firebug or another web inspector. You'll see that there's a file called full.js. It's minimized, but you can expand the code using a variety of online tools; I go the very lazy approach of copying/pasting the whole thing into the "javascript" box in jsfiddle and hitting "tidy". I'm sure there are better (and faster) ways to do it.
Anyway, in that file, there are a few functions that may interest you: StackExchange.tagPreferences and it's subfunctions, initTagRenderer, and StackExchange.inlineEditing. I think the last function is the one that causes the specific delay you're referring to, but it's pretty hard to tell.

Add telerik RadNumericTextBox to <td> innerHTML using Javascript

I want to add telerik RadNumericTextBox to innerHTML using javascript or jquery. How can i achieve this?
If you mean the RadNumericTextBox specified here, then you are looking for a server solution that has nothing to do with javascript.
innerHTML is a property of a DOM element that can't exist until firstly a DOM and secondly an element within it exists. So if you are looking for a server-side solution it has nothing to do with innerHTML or javascript (at least in regard to adding suitable markup at the server in ASP.NET).
If you are looking for equivalent functionality to be applied on the client, you can validate input at some convenient time (that is, convenient for the user) which is likely when a form is posted or when the user leaves the field in question (which will typically dispatch a blur event and perhaps a change event if the value changed).
You can also use the HTML5 input#type=number, however that will only work in browsers that support it (a good percentage don't).
A listener that validates that the value of a form control (probably an input in this case) is quite simple to write and attach to the element if that is what you want. In any case, innerHTML is unlikely to be involved in a suitable client-side solution.
What are you actually trying to do?

how to build custom focusable object in HTML/JavaScript

I want to build a custom object in HTML which is focusable. How can I do that in general?
More specific about why I want that: I need some kind of editor component with much more power and control over it. I.e. no single character should be possible to be typed in directly. It is like a big tree of objects (imagine an AST or so) and your focus is on some of these objects. Each object has some properties, maybe a character sequence which can be edited and some subobjects. Now when you type, depending on where the focus is, it should manipulate those objects, i.e. add some new sub objects (at the place where the focus is), delete some objects or do some other manipulations. Also pasting should not be allowed directly, it should rather parse the current clipboard content and then do the specific manipulations. Copying some content should result in some sort of text representation in the clipboard.
I could go now and somehow recode something like a focus cursor myself but that has several disadvantages. Mostly that it ignores where the real focus is right now. And I'm not sure if it makes anything easier, if HTML may provide already something like this.
Edit: After I found some first useful information, some still open questions:
What is an easy way to draw some focus cursor? I.e. if some div has the focus right now and it contains some text, I want to draw a cursor.
How do I handle copy & paste? (See above for more details.)
Ah, I found somewhat useful information here. I guess there is anything explained I need to handle the focus in the way I want.
Simply use html inputs, and handle special keys with it.
If you add tabIndex attribute to html elements the focus can be stopped on it (i mean not just input and textarea). If you alternate these focusable objects with text inputs when its focused, you can easily build custom editor UI.
In ie window.clipboardData wraps the clipboard object (simple ex: http://lab.artlung.com/copy-to-clipboard-javascript/) in other browsers you can trigger copy/paste width document/Range.execCommand('Copy');
Simple Example:
Copy = textHolderElement.createTextRange();
Copy.execCommand("Copy");

Categories