Develop Reference

Force emoji keyboard in html

I'm aware there are multiple input types that force different keyboard layouts on mobile devices. Is there an input type or other attribute that will force the input to open to emoji keyboard on focus?
I don't believe there is, as emoji is technically another language keyboard. But I'd love outside validation to make sure this is the case.

You can't for now, there was an issue on github about that : https://github.com/w3c/html/issues/495

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}
/>

Programmatically trigger copy menu in iOS safari using javascript?

I'm trying to implement a user-friendly way to copy some text from a text input field to the clipboard on iOS/Safari. I understand there is no way to programmatically do it on this platform, but I was hoping I could guide the user experience as much as possible.
On iOS/Safari, when a user manually highlights some text, a contextual Copy menu pops up. I was hoping the same menu would pop up when the text is selected programmatically, but it doesn't. Is it even possible to do that?
If not, any advice on how to best implement a user-friendly experience to copy some text to the clipboard on iOS/Safari?
For reference, I'm selecting the text using the method described in this question:
Programmatically selecting text in an input field on iOS devices (mobile Safari)

It's not possible unfortunately. I'd include some informative text below the input, hopefully that will work out okay in terms of user-friendliness.
Another option would be to go native, e.g. by wrapping using PhoneGap, but I guess you are already well aware of that option. If so, something like this would work in native code:
[UIPasteboard generalPasteboard].string = #"your string";

From javascript it is possible with the help of iOS (objective C).
var getVal = $("#textid").val();
localStorage.setItem("getVal",getVal);
and then you can use your native code for getting this value from local storage.
I haven't knowledge of objective C but you can use that's method after js code.

Cut Copy Paste jQuery/Javascript

I want to know if it is possible to select the text anywhere on a webpage and then copy it using jQuery or Javascript.In another language how to invoke CTRL+X,CTRL+C and CTRL+V on a selected text using jQuery or Javascript?.Can this be done?However the CUT command will be invoked on the text which is present in a textarea or textbox not on the hypertext of the webpage. Please let me know.

You could probably invoke the buttons, and copying text on a webpage is most certainly possible with access to the DOM, however it seems like what you are trying to do is access the clipboard, and the way to do that consistently is usually with flash.
The ZeroClipboard plugin is the one most commonly used, it's easy to integrate and gives you full access ro the clipboard.
For an example have a look at CSS3Please, I believe they are using the ZeroClipboard plugin.

Can this be done?
...
I don't want to use Flash
No, not if you need it to work in all major browsers.

Prevent a copy/paste to copy the style of a web page to a Rich Text Editor

I'm trying for two days now several JavaScript lightweight Rich Text Editors (rte) such as nicEdit, mooEditable, MooRTE (the two last ones were considered because they use the mootools framework which I'm using for this project).
My problem is that with all of them, when I copy a pre-formated text from a web page (with words in bold, links etc...) and then paste it into the editor, it appears already formated.
This could be nice but that's a security problem because if I copy/paste a whole web page it will render the whole web page in the editor.
I just want my users to be able to do some basic formatting with the editor such as putting some text in bold, italic, add a link and indent their paragraphs.
An alternative could be showdown (which - I would bet - is used by stackoverflow), because this type of editors (with a preview box) don't suffer from the aforementioned issue (when you paste something in the textarea, it is unformatted text).
However, I'm not sure this would be appropriated to my case because the editor would be used to write long articles (much longer than most of the stackoverflow posts). In that case I think it would be better to have a proper editor that renders things instantly (I mean right in the textarea, not in a preview box). And a real WYSIWYG editor is more enticing and easy to use, in my opinion.
Is there a easy way to modify a RTE so that when I paste some text it is rendered unformatted?
Or do you think I should use the sort of solution that stackoverflow uses? (showdown or similar) Or do you know a RTE that doesn't have the copy-paste issue that I mentioned?
Note that I didn't try CKeditor, FCKEditor and TinyMCE because they are far too complex(heavy) and the one from YUI looks good but needs the whole library to work.
Thanks,
FuzzyTern

You are copying from a rich text source and pasting into a rich text destination. By default you will get rich text in the destination. The only way around this is to capture the paste event somehow, redirect the paste operation into a plain text field, then copy the unformatted text out of the plain text field into your rich text destination.
Use the onPaste handler to capture
paste events (doesn't work in
Firefox or Opera)
Use a hidden field to paste the
selected text into.
Insert the value of the hidden field
into the rich destination at the
cursor location.
Not sure where the profit comes from, but there you go.