I have some textarea elements where a user can enter a message to a companion.
These are presented in a modal in the Phonegap WebView.
When the modal is present on screen I disable the scrolling on the WebView body like so:
document.ontouchmove = function(e) {
e.preventDefault();
};
Likewise when I hide the modal I re-enable it like so:
document.ontouchmove = function(e) {
return true;
};
The textarea elements do not seem to be able to scroll on touch events. I looked into this and tried applying the following CSS:
overflow-y: scroll; /* has to be scroll, not auto */
-webkit-overflow-scrolling: touch;
But this did not help.
When the user enters some long text the textarea moves in line with the amount of text but a user cannot scroll back to a previous position.
Is there a solution to this?
You could just look to see if the move event was coming from a textarea and allow those events to pass through.
document.ontouchmove = function(e){
if(e.srcElement.type !== "textarea"){
e.preventDefault();
}
};
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.3/jquery.mobile-1.4.3.min.js"></script>
Add jquery Mobile js in head tag .. it will work
Related
I've got a div that can move up and down, but it's scrolling is not controlled directly by the user. I've implemented the following code to prevent the user from scrolling this div.
$('.teamheading').bind('mousewheel DOMMouseScroll', function (e) { return false; });
This works great on desktop. It doesn't work on mobile though. Do you know what the mobile equivalent of this would be?
Thanks!
You can listen for the event
[div].addEventListener('scroll', function(e) {
// your code here
});
I want to make the soft keyboard show on
$( document ).ready(function() {
....
});
here's my html code:
<form id="typerForm">
<input id="typer" style="position:relative; left:-100em;"/>
</form>
<div id="myInput" style="border:2px solid #4AA; width:6em; height:1em; font-size:2em"></div>
<div style="height:20em; background-color:#eee">
</div>
and here's my javascript code:
$('body').click(function() {
$('#typer').focus();
$('#typer').select();
});
$('#typerForm').submit(function() {
//alert("submit");
setTimeout("$('#typer').focus();", 1000);
return false;
});
$('#typer').bind('keyup', function(e) {
var input = $.trim($(this).val());
// some lines of code..
$('#myInput').text(input);
//...
//$(this).val('').focus(); // clean up
});
or you can look at my code here http://jsfiddle.net/7urry794/
my code works to show the keyboard on mobile web browser when i click on somewhere or click on the input text. And what i want is show keyboard automatically when the page ready or finish loading
you can use below code to open keyboard on iOS or Android
There are a couple of ways I know of to get around this:
prompt() opens the keyboard
If you trigger the .focus() from within a .click() event (e.g. from opening your dialog), the keyboard shows up
Hope it might help
You can do this by calling focus() then click() on the input, but only if the script is initiated by user input. All attempts to get this to work from an onload handler with no user interaction FAILED :-( Beware of endless loops if your script is triggered by an onclick() on a containing element. The script below is working for me on Chrome for android 58 and Safari mobile 602.1, when called from an onclick().
function onSomethingOtherThanLoad(event){
// get the input
var target = document.getElementsByTagName("input")[0];
if (event.target != target) {
target.focus();
target.click();
}
}
I need to bind the paste event on div, so that i can grab the image from clipboard and assign it to a angular scope variable. This works fine in chrome but it doesn't work on IE 11 without adding contenteditable=true attribute. The problem with content editable is it breaks existing drag and drop featue of div.
I was looking similar to snag.gy where we can paste without contenteditable.
Any guidance please
[update]
Js Fiddle for test https://jsfiddle.net/sfL6ympx/
- you can remove contenteditable=true and check
I think I understand what you're trying to do. But, snag.gy does it without contenteditable=true because their pasting event is not dependent on a particular element in their DOM. So, it's a window.onkeyDown event.
You can combine them both for your need. Once, the div is clicked, set the focus on it. And when there is a keyDown event on that div, check:
if( (event.keyCode == 86 || event.which == 86) && event.ctrlKey )
'86' is the keyCode for V. Then, execute your code within that block!
Actually, with a little bit of reverse engineering we can see that snag.gy does use contenteditable=true, with some css to hide it and some javascript to make sure it gets the focus before the paste event.
Here's how to do it:
Demo: https://jsfiddle.net/raine/zyf40Lnc/40/show
Fiddle: https://jsfiddle.net/raine/zyf40Lnc/40/
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
/* invisible paste capture element */
#paste-capture-parent {
z-index: -500;
width: 0;
height: 0;
overflow: hidden;
position: fixed;
}
#paste-capture-area {
-webkit-user-select: auto !important
}
</style>
</head>
<body>
<div id="paste-capture-parent">
<div id="paste-capture-area" contenteditable="true"></div>
</div>
<pre id="output"></pre>
<script type="text/javascript">
// get elements
const captureArea = document.getElementById('paste-capture-area')
const output = document.getElementById('output')
// focus the capture area when a key is pressed
document.addEventListener('keydown', () => captureArea.focus())
// detect paste on capture area
captureArea.addEventListener('paste', e => {
const text = e.clipboardData.getData('text/plain')
output.innerHTML += `You pasted: "${text}"\n`
})
</script>
</body>
</html>
I'm building an Angularjs app that has a at the bottom of one view.
Problem in mobile safari on iOS9:
When focusing the textarea the soft keyboard is shown and covers the lower part of the view.
How can I scroll the page up when the keyboard is visible so that the content (i.e. the textarea) is not covered?
Here is one way you might prevent scrolling. Add overflow:hidden to the document body when your inputs are in focus.
function toArray (collection) {
return Array.prototype.slice.call(collection);
}
function noScroll (event) {
if (event.type === 'focus') {
document.body.classList.add('no-scroll');
}
else if (event.type === 'blur') {
document.body.classList.remove('no-scroll');
}
}
var inputs = toArray(document.querySelectorAll('input'));
inputs.forEach(function(input){
input.addEventListener('focus',noScroll,false);
input.addEventListener('blur',noScroll,false);
});
.no-scroll {
overflow:hidden;
}
To scroll the page up, you could use document.body.scrollTop when the inputs are in focus and set the value to the desired location.
I'm using the following solution to prevent loss of focus of the #content textarea when the user has clicked on a .box element:
// Detect latest element clicked
$(document).mousedown(function(e) {
lastElClicked = $(e.target);
});
// Prevent loss of focus for textarea when clicking on tools
$("#content").on("blur", function(event) {
if (lastElClicked.attr('class') == 'box'){
event.preventDefault();
this.focus();
return false;
}
});
In a few words, on mouse down save the target element that has been clicked. On the blur of the #content textarea check if that last element clicked was a .box. If it was then prevent default, refocus the #content textarea and return false.
My solution works perfect under Chrome but I still loose focus under Safari and Firefox. How can I make this work cross browser?
EDIT:
The problem with the solutions offered is that the element actually looses focus and is refocused after. In Chrome with the code above I never actually loose fucus, which means selected text stays selected.
EDITED:
try this:
// Detect latest element clicked
$(document).mousedown(function(e) {
window.lastElClicked = $(e.target);
});
// Prevent loss of focus for textarea when clicking on tools
$("#content").on("blur", function(event) {
if (window.lastElClicked.attr('class') == 'box'){
event.preventDefault();
var that=this;
setTimeout(function(){
$(that).trigger('focus');
},200);
window.lastElClicked="";
return false;
}
});
Also this is a nice article on this bug which appears to be on Safari's part: http://bugs.jquery.com/ticket/7768
Alternatively you could try this one:
$('.box').click(function(event){
event.preventDefault();
$('input').each(function(){
$(this).trigger('blur');
});
setTimeout(function(){
$('#content').trigger('focus');
},200);
});
finally I have to mention that it still loses the focus on the highlighted text which seems to me as an impossible task to achieve in this case!