I have a web application. It is running on struts framework but i dnt think it's relevant to my question. :)
I want that when I click or put my cursor on my textbox I can directly type japanese katakana, hiragana and kanji characters.
Windows has this IME which enables you to type these characters by enabling japanese or any language by pressing alt + ~ or depending on your setting. What IO want is I dnt have to do this. IT should be automatic.
Is this possible with javascript or any technology? PLease help
Try
ime-mode: active
in css style, basically you could set auto, turn on, turn off by default for IME
More info regarding ime-mode on MSDN & MDC
You can use an external javascript library, such as wanakana.js.
Here's an example:
<script src="https://unpkg.com/wanakana"></script>
<input type="text" id="wanakana-input"/>
<script>
var textInput = document.getElementById('wanakana-input');
wanakana.bind(textInput, /* options */); // uses IMEMode with toKana() as default
// to remove event listeners: wanakana.unbind(textInput);
</script>
Related
I am using the sortable component from the Kendo UI Angular 2 library to create a list of custom components which the user can drag and drop to rearrange as they need. By default, the sortable's items can be dragged by clicking anywhere within the item. My question is: can we specify a handle like we would in the classic Kendo UI? I want the user to drag the item only when using the header of the item, not the body.
I could not find anything in the documentation and I was hoping that if anyone had done it they can point me in the right direction.
Thanks.
Without access to the TypeScript source code (only have access to the transpiled JavaScript), it's hard to tell, but based on my quick examination the answer is no. It doesn't support options like the Kendo UI JavaScript version does where you can specify a handle selector.
If you have a handle element, according to the docs, you're supposed to add the draggable="true" attribute to your element in the Sortable's template.
See http://www.telerik.com/kendo-angular-ui/components/sortable/#toc-known-limitations
<kendo-sortable [data]="items">
<ng-template let-item="item">
<button draggable="true">
{{item}}
</button>
</ng-template>
</kendo-sortable>
My experience with this Kendo Angular component is it's not that great. I have my own open issue with it. It doesn't seem to work well outside a narrow scope.
For now, at least in my project, we'll be using Dragula. There is an Angular2+ wrapper for it available. It does support handles and such in its options.
https://github.com/valor-software/ng2-dragula
I know it has been years since this original question was asked, but as of this writing, Kendo still does not support a "handle" mechanism natively. There is, however, a way to implement the "handle" feature, which I will write here in hopes that someone in the future may find this helpful. Note I don't believe this is the right solution, because I believe Kendo's API should have this feature.
Using a Mouse
Prevent Drag Start
When we start to drag on the widget, we only want dragging to occur if our mouse is over a valid handle.
Define a flag in your component's code.
/** whether we should allow dragging **/
allowDrag: boolean = false;
Listen for dragStart on the kendo-sortable element
<kendo-sortable (dragStart)="onDragStart($event)">
Stop the default dragStart event when the flag is true
/** handles the starting of dragging */
onDragStart(e: DragStartEvent): void {
if (!this.allowDrag) {
e.preventDefault();
return;
}
}
Toggle on mouseover and mouseleave
When your mouse is over the handle element, enable the flag. When your mouse leaves the element, disable the flag.
<div (mouseover)="allowDrag = true" (mouseleave)="allowDrag = false" class="drag-handle"></div>
Incorporating Touchscreen Users
The philosophy of the above approach relies on only listening for the mouseover and mouseleave events on the handle, and ignoring everything else. For mobile - it's a bit trickier, because there isn't a mouse-position that specifically defines whether a user in position to make a drag. So, we have to add a listener to handle elements, as well as to all other non-handle elements we don't want dragging on. This approach could have been employed for mouse clicks as well, though I believe only attaching to the handle elements is the better approach.
Note: I haven't fully tested this approach yet, and it may not be suitable in all conditions, and may not work as expected for all users.
Add the touchstart Event
In your view, listen for touching the handle
<div (touchstart)="allowDrag = true" (mouseover)="allowDrag = true"
(mouseleave)="allowDrag = false" class="drag-handle"></div>
Also including touching all things that aren't handles
<div (touchstart)="allowDrag = false">
My non-draggable thing
</div>
Ckeditor is magic, but it was programmed to mess with me.
I've linked to the CDN and instantiated a textarea that is given the id cke_quotation. In the original textarea, I had a jquery function that on keyup and focusout, there was a count for characters. Now I want to link this function to the ckeditor quotation, which has the id cke_quotation. It won't work, though. What am I doing wrong?
CKEditor doesn't work on plain textarea - it's working with contenteditable element instead. If you would like to listen for key events you'd need to listen to, so called, editable.
var editor = CKEDITOR.instances.quotation;
editor.editable().on( 'keydown', function( evt ){
console.log( 'keydown', evt );
// You could call editor.getData() to get current editor
// contents and then count anything you like.
} );
But instead of looking for events like keydown you should be more interested in more "input agnostic" event like change (because change might be caused by different sources, like paste, cut, drag and drop).
Then again if you're looking for word counting feature for CKE then why bother with creating your own plugin? You could simply use something like wordcount plugin.
I am working with CKEditor 4.0.1.1 in an intranet and try to validate my code with W3C markup validation service.
The validation markup service find this error :
Error Line 547, Column 2455: there is no attribute "data-cke-saved-src"
<img alt="" data-cke-saved-src="http://portail-rep/Contents/images/Java…
How can i disable this functionnality of ckeditor protecting code to make my code ok for W3C validation ?
CKEditor uses many special attributes and elements to implement some of its features. However, they are used only internally and should be stripped out when getting data by editor.getData(). Therefore editor produces valid markup.
E.g. open http://ckeditor.com/demo, switch to source mode and you'll see that the image doesn't have the data-cke-saved-src attribute. However, if you'll use Firebug or Webkit's dev tools you'll find that the image has this attribute.
PS. In fact, data-cke-saved-src is a valid attribute in HTML5.
I had same problem now. This problem has been solved by using CKEDITOR config on blur event.
I'am using inline editing on element.
My ck config contain on blur event which have destroy method.
CKEDITOR.config.on = {
blur: function() {
this.destroy();
}
}
Using is simply:
On element click will create instance of new editor and it enable inline editing.
Now if user click outside of editor and on blur event invoked, editor destroy it self and if no editor instance exist, the content of the data is cleaned from data-cke attributes.
I am using a modal popup up control in jQuery, the popup has an input text powered by jQuery Tokenize input plugin. The problem is when i type something on modal popup text box, the search results by tokenize plugin are shown hidden under the popup. Actually they should apprear on top of all controls. Would someone please help me as I am a beginner.
Try to seek help from thread below, zindex is not working.
https://github.com/loopj/jquery-tokeninput/issues/190
here is the input control that i am using.
http://loopj.com/jquery-tokeninput/demo.html
Thank you.
It works by setting the z-index manually:
$(".token-input-dropdown").css("z-index","9999")
The function given in
https://github.com/loopj/jquery-tokeninput/issues/190
does not work in my coffeescript:
$('#book_author_tokens').tokenInput('/authors.json', {
zindex: 9999
});
I think that a better solution is to add it to the css file (instead of doing it via js):
div.token-input-dropdown-facebook {
z-index: 11001 !important;
}
Of course, drop the "-facebook" suffix if you're using the default theme.
I would like to know how to implement a dialog that show up when you first start Firefox to ask the user to enter some input. This input will be stored somewhere temporarily, and should be used later on by the plugin when required.
I have full understand of how to implement firefox plugin (this includes understanding of XUL and Javascript), so no need for full plugin example. The specific question is how to show a dialog when firefox start that ask for input, and how to store the input in a temporary storage.
Any help would be appreciated.
Add an event listener to your overlay.xul:
<window>
<script type="text/javascript">
var your_func = function (e) {
var pref = window.prompt ("Your name:","");
}
window.addEventListener ("load", your_func, false);
</script>
</window>
The your_func() will be called, whenever a new window (not a new tab) is loaded. If it should only be on start-up, you'll have to make an additional test. You find details here: developer.mozilla.org
For persistence you could store the found value as a preference: Preference Code Snippets. It would be useful then, to check in your_func, if such a preference exists, before opening the prompt.
Instead of a plain prompt, you could do the following:
window.open ("chrome://my-plugin/content/prompt.xul", "MyWindow", "chrome,modal,alwaysRaised,centerscreen");
The magic lies in the "modal" value in the third parameter.
Cheers,