Develop Reference

Changing Contenteditable type to number Cordova

i want my cordova app to show a soft keyboard of numbers only.
in an input, i can easily change the type to number but in the contenteditable table, im not finding a way to do it.
Is there a way to change the type not validate the input?

you can use cordova-plugin-ionic-keyboard this extension.
it will open number keyboard properly on contenteditable table

How to enable typing for non-english characters in a HTML textarea?

I have installed Arabic web fonts on my website. But when I type anything in a Textarea I see English characters. When I Copy Arabic characters from another website and paste into textarea, they appear perfectly.
How can I insert arabic character directly from my keyboard?
Thanks,
Zubair

you need to change the Keyboard language. Depending on the operating system you must find how to set your keyboard input from standard US to Arabic. On Windows 8 you go to
Control Panel -> Change input methods -> Add a language on Windows 7 and Vista check out the following How to change your keyboard layout. Also I am assuming you have included
<meta charset="UTF-8"> in your HTML file.

To enter Arabic characters on your keyboard, you need to use a keyboard layout (keyboard driver) that allows such typing or to use some other (system-dependent) input method.
But as you probably mean how to make it possible to your visitors to enter Arabic text, that answer is not that useful.
Generally, you can expect that people who can and wish to type Arabic text are using devices and software that make it possible to them to do so. You do not need to do anything except 1) the usual thing of using UTF-8 encoding for the page and declaring it (or, if that is not possible, at least using accept-charset=utf-8 for the form element) and 2) the special thing of setting dir=rtl on the textarea element if it is expected to contain (dominantly) text in Arabic letters or another right-to-left writing system.
However, it is possible that a user who can and wishes to write in Arabic letters is using a non-Arabic keyboard layout, e.g. a US keyboard at a hotel. He might even have no way of changing keyboard layout. You may therefore consider using one of the following techniques (not mutually exclusive, but using both might be confusing):
1) Set up a virtual keyboard on your page, i.e. a set of elements that look like keyboard keys and act so that when you click on one of them, the character shown in it gets appended to the textarea. This is relatively straighforward and does not take much time to code for a relatively small alphabet like the basic Arabic letters. Many sites use such techniques.
2) Set up handlers for keyboard events so that e.g. when a user presses a key that normally produces the letter “a”, your code intercepts it and inserts, say, the Arabic letter ʾalif instead. This is somewhat more complicated due to differences between browsers in handling keyboard events. The main problem, however, is that you cannot know the type of the keyboard used. The user might have a keyboard layout that lacks all Latin letters at least in the primary positions. Moreover, the user might want to type a word in Latin letters, e.g. a proper name in the midst of Arabic text.

open android and ios keyboard with uppercase using html

i am creating a web page for mobile devices. In that there are few input fields which require user to always enter data in uppercase.
I looked at few options like
text-transform property of css
It changes user input to uppercase but it also changes the placeholder. That doesn't looks good.
autocapitalize attribute for input
By setting it on, it allows keyboard to open in caps. But this doesn't seems to work for me. It works perfectly with textarea but not with input in android.
Is there any better way to achieve this?

try adding autocapitalize="characters" to input, it worked for me on Android, and it should work on other kind of devices as MDN web docs says here:
The autocapitalize attribute doesn’t affect behavior when typing on
a physical keyboard. Instead, it affects the behavior of other input
mechanisms, such as virtual keyboards on mobile devices and voice
input.

You should be able to bind to a keydown or keypress event (I'd use jQuery) and modify the input.
It won't affect the soft keyboard; maybe you can use this along with autocapitalize?

So just to add some more information for future users, here is an example where all displayed text will be in caps and the virtual keyboard will also show in all caps.
Note that custom keyboards like swift apparently do not work but the builti in ones do.
Changes are done through inputProps
<TextField
name={props.name}
value={props.val}
inputProps={{autocapitalize:"characters", textTransform:"uppercase"}}
onChange={props.doStuff}
/>

Change font on text manipulation on Android

I have a webpage with text input and monospaced font:
<input type="text" style="font-family: monospaced">
And this works like a charm on Android. But when I enter the "edit" mode on the device, when the keyboard pops up, the font changes back to the platfom specific one (not monospaced). When the editing is done and text field loses focus, it changes back to monospaced again.
The idea here is to change the text manipulation font to monospaced also when editing the text. Is there a way to do it from within HTML / CSS / Javascript? My first impression is "no", as this seems to be platform defined in the underlying TextView. But maybe my impression is wrong.

Are you talking about an embedded WebView. Then it is possible.
You could add a javascript interface in Android. Then in your javascript you could add an event listener on the input fields, which will use the javascript interface to trigger an action on the native app. This action could also be changing the font-family of native components.

Creating a foreign language on-screen keyboard for CKEditor

I am using CKEditor as a rich text WYSIWYG Javascript editor.
I would like to add an on-screen keyboard so that they can easily enter text from non-English alphabets.
I was planning on finding a JavaScript on-screen keyboard and adding a custom button with a CKEditor plug-in to trigger it.
I've found a couple of JavaScript on-screen keyboards. I like the one that Google provides best. The problem is that it needs to be bound to an HTML <textarea>. As far as I can tell CKEDitor uses an iFrame and has no <textarea>. Does anyone have any ideas for how to work around this problem? Is there a way I can bind the keyboard to the CKEditor "<textarea>"? Or is there an on-screen keyboard that doesn't need to be bound to anything?
Thanks!

You can try this one
http://debugger.ru/demo/projects/virtualkeyboard/richedit/ckeditor/plugins/Jsvk/examples/sample.html
There you'll see development release, but shortly it will be replaced with production one.
Project page: http://sf.net/prokects/jsvk/