In IOS5 on the iPad, iPad2 etc. iBooks accepted <input type="color"> as a way to prompt the keyboard to display when you clicked on an input field, to say, type in the answer to a question. I've just recently updated to IOS6, and this workaround no longer seems to be working. I tried using the JavaScript I found here - http://www.linkedin.com/groups/How-Show-iPads-Keyboard-when-3877009.S.84287009
<script type="text/javascript">
function iPadTouchHandler(event) {
var type = "",
button = 0; /*left*/
if (event.touches.length > 1)
return;
switch (event.type) {
case "touchstart":
// OLD: On iPad2 clicking on a text input field did not show the keyboard
// if ($(event.changedTouches[0].target).is("select")) {
// NEW: Now on iPad2 the touchstart-Event on input fields is ignored and everything works fine
// change my by Roland Caspers, Scheer Management
if ($(event.changedTouches[0].target).is("select") || $(event.changedTouches[0].target).is("input")) {
return;
}
iPadTouchStart(event); /*We need to trigger two events here to support one touch drag and drop*/
event.preventDefault();
return false;
break;
</script>
However this code seems to be outdated and relevant to IOS5. I know of a workaround, which is to put the page with the input into an iFrame, in that case you can just use <input type="text">, however I'd prefer to stay away from iFrames as they tend to move the content around depending on where the input box is. Any thoughts as to other possible solutions or workarounds? Tyvm :)
I am also Facing the same issue on iOS6 for , the same is working perfectly on the <iframe> tag. But it omits the images & style and etc.
Review the code "http://www.linkedin.com/groups/How-Show-iPads-Keyboard-when-3877009.S.84287009", I feel some thing has to modify on below condition:
($(event.changedTouches[0].target).is("select") || $(event.changedTouches[0].target).is("input"))
I'd be great if anyone provide the earlier response.
Thanks
I struggled with this same problem in iBooks on iOS 7. The tricky part was, that iBooks probably makes all text input fields disabled by default. We are using prototype.js, so here is my solution written for prototype:
$('my-input-field-id').observe('touchstart', function(event) {
var element = event.element();
if (element.disabled)
element.disabled = false;
element.focus();
event.stop();
});
So just listen for the 'touchstart' event on the input field and enable and focus the field when touched. It works for ordinary text fields (<input type="text">). Simple :-).
Related
I use Anki, a software of flashcards to learn a new language.
What my card looks like :
I want to use a key on my (physical) keyboard to show/hide additional infos on my card to review my cards faster on iPad.
The problem is that the document element is not focused at first (it is the answer buttons that are), so the keyup event in JS/JQuery doesn't work. I need to touch the iPad screen first to then use my keyboard if I want it to work, which kind of defeats the whole point.
My code :
$(document).ready(function() {
$(document).on('keyup', function(e) {
var key = e.key;
if (key == "p") {
// My Code
}
});
});
I tried $(document).click(), $(document).trigger("click") and $(document).focus() without success. Other people (on Reddit) have had this problem but resolved it with add-ons for Anki − As I would like to make it work on iPad (so no add-on), this is not an option forme sadly.
Any help would be greatly appreciated.
Cheers!
I cant get my select box to work with i enable touchenabled in desktops. Viewing my fiddles you will see when you click on "ARTICLE" the select box will only work if i disable touchenabled for desktop users.
touchenabled:"on" http://jsfiddle.net/y82XD/ (ARTICLE select box will not work)
touchenabled:"off" http://jsfiddle.net/y82XD/3/ (ARTICLE select box works fine)
I am using a script to detect mobile devices and want to enable touchenabled: "on" , when device.mobile is detected. The mobile detection script has a JavaScript Method called device.mobile() that can be used . So using the below script for the slider , how would i go about incorporating the device.mobile() to set touchenabled:"on" for mobile , while setting touchenabled:"off" for everything else ?
var tpj=jQuery;
tpj.noConflict();
tpj(document).ready(function() {
if (tpj.fn.cssOriginal!=undefined)
tpj.fn.css = tpj.fn.cssOriginal;
tpj('#slidebox').services(
{
width:620,
height:460,
slideAmount:4,
slideSpacing:10,
touchenabled:"off",
NEED CODE HERE to enable touchenabled:"on" when device.mobile detected
mouseWheel:"off",
hoverAlpha:"on",
slideshow:3500,
hovereffect:"on",
callBack:function() { }
});
});
I was able to get the select box to function by changing the following two options in your slidebox services:
touchenabled:"off"
hoverAlpha:"off"
Those were previously on. When I turned them off, the parent slidebox div lost its mousedown and touchcancel event listeners.
I don't know enough about this package to understand what implications this might have. But it looked to be doing everything it was doing previously.
If you need to have these options on, then perhaps you could turn them off when this particular page is displayed? Or maybe you could unbind the two listeners that are causing the problems when the page is displayed.
UPDATE:
Ok, after reading your new comments, I'm not sure why this won't work, but it does seem a bit simple, so maybe I still don't understand it 100%.
var touchEnabledValue = (device.mobile) ? "on" : "off;
tpj('#slidebox').services(
{
width:620,
height:460,
slideAmount:4,
slideSpacing:10,
touchenabled: touchEnabledValue,
mouseWheel:"off",
hoverAlpha: touchEnabledValue,
slideshow:3500,
hovereffect:"on",
callBack:function() { }
}
I have no idea if this is possible, I can't seem to find anything.
What I want is to offer the user the option of either "drag drop" an image or use the normal html file input box.
I don't the image to be uploaded until the form is saved. So I guess the drag and drop area would just update the field?
How would I go about doing that?
Thanks in advance.
I came here looking for the same answer. Ended up do the following, which looks to fit your need.
Make a div for your image drop box, then add your input type="file" inside the div. Set height and width as desired. Set opacity to 0. Now your input fills the div, can't be seen, but still functions.
<div class="divClass">
<input class="inputClass" name="inputName" type="file">
</div>
Styles below
<Style>
.divClass{
position: relative;
// anything else
}
.inputClass{
opacity: 0;
position: absolute;
top:0;
left: 0;
height: x // as desired
width: x // as desired
}
</style>
=== Edit ===
Ignore my styling up there, you really just need to use a form with an input type=file. Style/layout as needed.
As pointed out, by Shazoo, drag and drop of image does not work in IE. Works with Firefox and Chrome. Unsure of Opera and Safari. You cannot use JavaScript on the input type=file for security reasons -- it is read only as Jasny said, so you have to rely on what the browser vendor allows.
With that in mind, you can just give the IE user the option of clicking the field to select and upload a file. The default input type="file" in IE offers this ability, so as long as you leave the input visible, they should see it. (Default Edge input type=file)
Filter for IE example (based on https://stackoverflow.com/a/31757969/3136874)
function stopIeDefault(){
window.addEventListener("dragover",function(e){
e = e || event;
e.preventDefault();
},false);
window.addEventListener("drop",function(e){
e = e || event;
e.preventDefault();
},false);
}
if (/MSIE 10/i.test(navigator.userAgent)) {
// This is internet explorer 10
stopIeDefault()
}
if (/MSIE 9/i.test(navigator.userAgent) || /rv:11.0/i.test(navigator.userAgent)) {
// This is internet explorer 9 or 11
stopIeDefault()
}
if (/Edge\/\d./i.test(navigator.userAgent)){
// This is Microsoft Edge
stopIeDefault()
}
This tests for IE and edge. If it detects a version then it will use stopIeDefault to preventDefault for drag and drop. This keeps IE from loading the image if someone drags and drops it on the form. (Edge appears to prevent this by default, so you may not need to call stopIeDefault as I have.) Additionally, you could apply a different style or add blocks of code or what not to deal with IE. According to w3schools, IE browser share is 5.2-6.2% as of August 2016: http://www.w3schools.com/browsers/default.asp, if that helps you decide what to do.
If anyone can confirm if drag and drop works on safari or opera, please do.
=== Edit ===
No it can't be done. Dropped files can only be uploaded through AJAX.
The only way to upload a file in a normal HTML form is through <input type="file"> and file inputs are read-only.
I have the following code:
function handle_paste_keydown(key)
{
if(key.keyCode == 86 && key.ctrlKey) // Ctrl + V
{
alert("Test...");
}
}
This works in IE, but none of the other browsers. My reason for doing this is that I have finished creating a rich-text editor, but I need to handle the onpaste event carefully because formatted text is able to make it in to my editor, which could pose a minor risk to security, but also butchers my layout if malicious <span>s and <div>s make it in.
My current method is to give focus to an off-screen textarea, which means all code will be pasted in to that (which removes formatting); then I immediately grab the textarea.value and insert it at the current caret position in my contentEditable <div>.
So anyway, how do I get the Ctrl+V to work in all browsers and why doesn't it work in its current state?
Thank you.
If it works in IE but nowhere else you did something wrong.
Use the keypress event rather than keydown.
http://jsfiddle.net/Lxvgr/1/
document.getElementById('foo').onkeypress = function(e) {
if(e.charCode == 118 && e.ctrlKey) alert('pasted');
};
#Eric Sites: "use jQuery" isn't the answer to every javascript question. including an entire external framework to solve a simple 4byte issue like this is ridiculous.
I am looking for a very minimal jQuery rich textbox plugin for a web app I am working on.
The user will only need to see the 'textbox', and not any toolbars as all of the rich formatting will be coded depending on what they type.
I have attempted to create my own with an iframe, but there are problems. One of them being when wrapping strings in divs, the caret is moved to the beginning and it can't be moved inside the div without clicking. http://jsfiddle.net/DVjYa/
This is a problem because I need it to behave like a normal textbox. In a normal textbox, you would be able to navigate with the arrow keys without having to click. Hence why I am looking for a plugin which has already overcome these problems.
You can use CLEDITOR which is very lightweight. You can disable all the toolbar buttons and hide the toolbar as well. In addition to this, it lets you make the selection bold/italic using keyboard shortcuts (CTRL+B/CTRL+I) even though the toolbar does not exist.
Demo: http://jsfiddle.net/Rft3A/
var editorDoc;
$(function() {
var editor = document.getElementById ("editable");
if (editor.contentDocument) {
editorDoc = editor.contentDocument;
} else {
editorDoc = editor.contentWindow.document;
}
var editorBody = editorDoc.body;
if ('contentEditable' in editorBody) {
// allow contentEditable
editorBody.contentEditable = true;
}
else { // Firefox earlier than version 3
if ('designMode' in editorDoc) {
// turn on designMode
editorDoc.designMode = "on";
}
}
});
will add another answer although post is a little old
Trumbowyg A lightweight and amazing WYSIWYG JavaScript editor - 15kB only (from github page)