I have made an app in android webview and I want that something can be copied. So when you press a button you will have something copied to your clipboard.
I have tried "clipboard.js" works browers but not on android. So I used this javascript:
var copyXBT = function () {
var theTheCopyXBTAdr = $('#theToCopyXBT');
theTheCopyXBTAdr.select();
try {
var successful = document.execCommand('copy');
var msg = successful ? 'successful' : 'unsuccessful';
console.log('Copying text command was ' + msg);
} catch (err) {
console.log('Oops, unable to copy');
}
};
But when you pressed the input type text will get a blue color,.. and blue border(android webview yellow) and on android your keyboard will pop up.
I use this css styling to "hide" it. Because I can't say display none. If I do that I won't work.
#theToCopyETH{
color: white;
border: 0px solid white;
}
::selection{
background: white;
color: white;
}
This is a piece of my HTML:
<button class="btn btn-coinchecker" id="copyETH">Copy ETH address</button><button class="btn btn-coinchecker" data-toggle="modal" data-target="#showETHQR">Click me to get the QR-code</button>
<input type="text" id="theToCopyETH" value="*********************">
See fiddle for example (please open in Google Chrome)
So my question is how to prevent the pop-up of the keyboard and get rid of the yellow-border in android (google chrome on desktop is that blue)
Thanks in advance for helping me!
I found the answer.
What do I need to do to hide my keyboard is this js:
enter var hidekeyboard = function (e) {
e.attr('readonly', 'readonly'); // Force keyboard to hide on input field.
e.attr('disabled', 'true'); // Force keyboard to hide on textarea field.
setTimeout(function() {
e.blur(); //actually close the keyboard
// Remove readonly attribute after keyboard is hidden.
e.removeAttr('readonly');
e.removeAttr('disabled');
}, 100)
};
I need to add that after my selection has happend otherwise I won't work.
My copyETH looks like this then:
var copyETH = function () {
var theTheCopyETHAdr = $('#theToCopyETH');
theTheCopyETHAdr.removeClass('toggleDisplay');
theTheCopyETHAdr.select();
try {
var successful = document.execCommand('copy');
var msg = successful ? 'successful' : 'unsuccessful';
console.log('Copying text command was ' + msg);
} catch (err) {
console.log('Oops, unable to copy');
}
hidekeyboard(theTheCopyETHAdr);
theTheCopyETHAdr.addClass('toggleDisplay');
};
So you can see I do also a removeClass and addClass. Because If I only use the hidekeyboard you can see the selection but with his css class it's gone + no-one can change the input field.
Here to see the solved fiddle
This should be enough to hide the input and prevent any activity when it's clicked/tapped, but not break your JS:
#theToCopyETH {
visibility: hidden;
pointer-events: none;
}
Related
In some SO Questions and Answer I get to know that, with the following way one can upload files via spread Sheet to Google Drive. In that point, Is there a similar way that can be done in android ? I have searched but no luck. Lately I had used Drive Api, but I cannot overcome the consent screen problem, though I have tried several times. So, I want something with the following way. Is there any android way of the following procedure?
Code.gs:
var dropBoxId = "012345679abcdefg"; // Drive ID of 'dropbox' folder
var logSheetId = "abcdefghijklmnopqrstu123"; // Drive ID of log spreadsheet
function doGet(e) {
return HtmlService.createHtmlOutputFromFile('InputForm.html');
}
function uploadFiles(formObject) {
try {
// Create a file in Drive from the one provided in the form
var folder = DriveApp.getFolderById(dropBoxId);
var blob = formObject.myFile;
var file = folder.createFile(blob);
file.setDescription("Uploaded by " + formObject.myName);
// Open the log and record the new file name, URL and name from form
var ss = SpreadsheetApp.openById(logSheetId);
var sheet = ss.getSheets()[0];
sheet.appendRow([file.getName(), file.getUrl(), formObject.myName]);
// Return the new file Drive URL so it can be put in the web app output
return file.getUrl();
} catch (error) {
return error.toString();
}
}
InputForm.html:
<form id="myForm">
<input type="text" name="myName" placeholder="Your full name..."/>
<input name="myFile" type="file" />
<input type="button" value="Submit"
onclick="google.script.run
.withSuccessHandler(updateUrl)
.withFailureHandler(onFailure)
.uploadFiles(this.parentNode)" />
</form>
<div id="output"></div>
<script>
function updateUrl(url) {
var div = document.getElementById('output');
div.innerHTML = 'Got it!';
}
function onFailure(error) {
alert(error.message);
}
</script>
<style>
input { display:block; margin: 20px; }
</style>
I have been stucked in this for a while. It is confirm that this.progressBarValue is changed to true. But the progress bar is not displaying. Can someone help me with this thanks in advance.
some-component.html
<div class="progressBar">
<mat-progress-bar class="fileProgress" mode="indeterminate" *ngIf="progressBarValue">
</mat-progress-bar>
</div>
some-component.ts
confirmConversion() {
this.progressBarValue = true;
console.log(this.progressBarValue)
var filepath = this.filePath;
var fileextension = this.settingsExtension;
new Promise((resolve, reject) => {
window.ConvertMedia(filepath, fileextension, resolve, reject);
}).then((message) => {
console.log(message);
});}
It is working(Progress bar is displayed) if I don't call that Cordova API. I also tried this using some methods given below but it didn't worked.
this.zone.run(() => this.progressBarValue = true)
console.log(this.progressBarValue)
this.changeDetector.detectChanges() & this.changeDetector.markForCheck()
Note: ProgressBar is displayed if I update this.progressBar = true inside
.then((message) => {console.log(message);});
I would try to add *ngIf to container - div like that:
<div class="progressBar" *ngIf="progressBarValue">
<mat-progress-bar class="fileProgress" mode="indeterminate">
</mat-progress-bar>
</div>
If default value for progressBarValue is false mat-progress-bar could not load properly.
Write if it helps or still nothing ;)
Also you can add to your html code
eg. :
<span> {{progressBarValue}} </span>
to keep track of value and be sure if it's even changing
I want to hide the top options bar in google drive. How can I achieve that? I am using cordova inAppBrowser to open this link.
https://drive.google.com/file/d/0B_nipvep1WpPd2JXeDdJcUlNYXM/view
I want to use embedded=true but I don't know how it would work. Please see the image below.
May be this will help you
You have to wait until your inAppBrowser page loading finishes.
//Set css in your inAppstyle.css
.drive-viewer-toolstrip{
display: none !important;
opacity: 0 !important;
}
You must add an event listener:
var inApp = window.open('https://drive.google.com/file/d/0B_nipvep1WpPd2JXeDdJcUlNYXM/view', '_blank', 'location=no');
inApp.addEventListener('loadstop', function(){
inApp.insertCSS({
file: 'inAppStyle.css'
},onSuccess);
});
Use this path for your android projects file:///android_asset/{your folder}
INFO: https://github.com/apache/cordova-plugin-file/blob/master/doc/index.md#android-file-system-layout
Your JS
text += '' + data.docs[i].doc_title + '';
Updated JS
text += '' + data.docs[i].doc_title + '';
//Create new function
function openthislink(ln)
{
var inApp = window.open(ln, '_blank', 'location=no');
inApp.addEventListener('loadstop', function(){
inApp.insertCSS({
file: 'inAppStyle.css'
},onSuccess);
});
}
i got a problem with my app.i'm developing an app with cordova & jquery mobile.
Following the code on jquery mobile master i found that code
function openPopup(idPopup, onTimeout) {
var popupContent = '<div data-role="content" data-theme="a" style="border:0px;" class="ui-corner-bottom ui-content centerContent">' +
'<h3 class="ui-title" id="myTitle">Caricamento</h3>' +
'<img src="img/load_shop33sell.gif"/></div>';
var popup = '<div data-role="popup" id="popup-' + idPopup + '" data-overlay-theme="b" data-theme="a" class="ui-content">' + popupContent + '</div>';
$.mobile.activePage.append(popup).trigger("pagecreate");
$("#popup-" + idPopup).on({
popupbeforeposition: function () {
$('.ui-popup-screen').off();
}
});
var fallback = setTimeout(function () {
$("#popup-" + idPopup).popup("open");
}, 3000);
$("#popup-" + idPopup).popup("open");
clearTimeout(fallback);
callback = setTimeout(function () {
$("#popup-" + idPopup).popup('close');
if (onTimeout && typeof (onTimeout) === "function") {
onTimeout();
}
}, 20000);
}
With this code, i am able to open a popup without needing to include a
<div data-role="popup">..../<div>
in each page i create.I just modified a bit adding the popupbeforeposition event to make the popup undismissable by clicking on the background.
Well, it works fine but i got a problem. Randomly in my first page this happens
Seems like the popup opens before it get the right position. In addition i have a second page which is scrollable, and i always have this situation. If i try to scroll up to the top of the page, i have half of the screen black, as in first picture.
What could be the problem?
Thanks in advance, and sorry for my english :)
As you mentioned it is due to data-overlay-theme="a". But actually it should works in good way..thinking that this is due to $('.ui-popup-screen').off();
you can observe here
Prevent JQuery Mobile from closing a popup when user taps outside of it
if you need an alternative way for black background you can do this ..
Add div <div id="overlaypage"></div> like this inside <div data-role="page">
HTML:
<div data-role="page">
<div id="overlaypage"></div>
<div id="header"></div>
</div>
CSS:
.overlaycont {
background:#000;
bottom:0;
left:0;
position:fixed;
right:0;
top:0;
z-index:100;
opacity:.6
}
jQuery:
When you try to click to open a popup addclass
$("#overlaypage").addClass("overlaycont");
When you closing the popup remove class
$("#overlaypage").removeClass("overlaycont");
Working demo: http://jsfiddle.net/nPeaV/7421/
ok, i solved the problem combining the two answers, this is my function to open popup
function apriPopup(idPopup, onTimeout) {
$(".ui-navbar").css('display','none');
var popupContent = '<div data-role="content" data-theme="a" style="border:0px;" class="ui-corner-bottom ui-content centerContent">' +
'<h3 class="ui-title" id="myTitle">Caricamento</h3>' +
'<img src="img/load_shop33sell.gif"/></div>';
var popup = '<div data-role="popup" data-dismissible="false" id="popup-' + idPopup + '" data-theme="a" class="ui-content">' + popupContent + '</div>';
$.mobile.activePage.append(popup).trigger("create");
//$("#popup-" + idPopup).on({
// popupbeforeposition: function () {
// $('.ui-popup-screen').off();
// }
//});
var fallback = setTimeout(function () {
$("#overlaypage").addClass("overlaycont");
$("#popup-" + idPopup).popup("open");
}, 3000);
$("#overlaypage").addClass("overlaycont");
$("#popup-" + idPopup).popup("open");
clearTimeout(fallback);
callback = setTimeout(function () {
$(".ui-navbar").css('display','block');
$("#overlaypage").removeClass("overlaycont");
$("#popup-" + idPopup).popup('close');
if (onTimeout && typeof (onTimeout) === "function") {
onTimeout();
}
}, 20000);
}
as you can see i have commentend the $('.ui-popup-screen').off(); , added a data-dismissable="false"
and i have used the overlaycont css style suggested by dileep.
in my index, as child of body,i added a <div id="overlaypage"></div> and $("#overlaypage").addClass("overlaycont");,
in this way popup is undismissabile by cliking outside of it, and background is displayed correctly.
such a pain!
I'm developing an app with multiple input[type=numer] elements. Android only for now.
The built-in numeric keyboard has two problems:
* it's inconsistent (different on different versions of Android)
* it has unnecessary keys (space, dash, comma and "next") which add confusion.
I'd like to have a keyboard with just numbers, comma and backspace. Is that possible?
Edit Oct 3, 2013. A third problem appeared and it's by far the worst. It looks like Samsung decided to skip the decimal character (".") from their numeric keyboard, at least the one that pops when input[type=numer] gets the focus in the browser. It seems all Galaxy S4 devices are affected (I've seen it on the S4 Mini, I don't have access to many Samsung devices... all I see are Nexus lovers :-)). I couldn't find much about the issue in Google, but I've seen Galaxy S4 users complain about it in 2012 (I've tried it on one S3 a few weeks ago and it was OK).
Long story short, after a careful consideration I decided to implement my own keyboard in html/javascript (Samsung is too important, I'm getting bad reviews just because of it and I don't think I can do anything to fix it). I'm in the process of rewriting my app, I'll try to remember and tell the story when I'm done.
Edit Dec 3, 2013. My current solution (still in alpha stage, the app rewrite takes me way longer than I expected) is a keyboard implemented entirely in javascript. I used regular <span> elements instead of <input> to prevent OS keyboard from popping out. As an added benefit, I get to control everything about the keyboard, so I added a few arithmetical keys (x, -, *, /, ( and )) and the user can type in expressions, for example "3x(2+5.5)" instead of "15". I'll link to the app when it's ready (still at least a few more weeks).
Sure it is.
First, configure your activity to never show the keyboard (try android:windowSoftInputMode = "stateAlwaysHidden"). You may have some problems if EditText insists on pulling it up, but you can make a mock EditText based on TextView to go around that, or inherit EditText and override some methods. There are multiple guide on that, like here: Close/hide the Android Soft Keyboard
Second, create your own UI-keyboard element, with any buttons you want in however layout you want, and catch button presses on this keyboard, for each press, append the appropriate character to the EditText/TextView's displayed text.
That said, users may not like it. As much as you hate that keyboards look differently for each device, each user is used to his own keyboard, and expects to see it when editing text. I urge you to reconsider.
Thanks for the update. Here is how I'm implementing it. It might be similar to how you are doing it. I'd be curious what issues you've run into so far.
I haven't moved this to production yet so still testing but it seems to work well so far. I've removed some validations from the code below to make it much shorter...
Basically the keyboard is 1 line on the iPad and 2 lines on the phone. It supports any input field with the class "keyboard" and highlights the entire ".keyboard-item" so it is clear to the user which field they are updating.
<div id="stuff">
<ul>
<li> <label for="name">Name</label> </li>
<li> <input type="text" id="name" class="required"/> </li>
</ul>
<ul class="keyboard-item">
<li> <label for="number">#</label> </li>
<li> <input type="text" id="number" class="keyboard required" pattern="[0-9]*" readonly="readonly" onkeypress="dosomething(this)"/> </li>
</ul>
</div>
<div class="mobile-number-keyboard">
<div class="mobile-number-keyboard1"> <span style="padding-left: 20px;">0</span> <span>1</span> <span>2</span> <span>3</span> <span>4</span> <span style="padding-right: 20px;">5</span> </div>
<div class="mobile-number-keyboard2"> <span style="padding-left: 20px;">6</span> <span>7</span> <span>8</span> <span>9</span> <span style="width: 8px;">.</span> <span style="padding-right: 20px;"><</span> </div>
</div>
<style>
.mobile-number-keyboard { width: 101%; height: 40px; margin: auto; margin-bottom: 20px; }
body.phone .mobile-number-keyboard { height: 80px; }
.mobile-number-keyboard span { float: left; padding: 8px 22px; border: 1px outset White; cursor: pointer; background-color: #4F81BD; color: White; }
.mobile-number-keyboard span:hover { background-color: #87CEFA; }
.mobile-number-keyboard span:active { border-style: inset; background-color: #00E5EE; }
body.phone .mobile-number-keyboard2 { clear: both; height: 40px; }
.keyboard-focus { background: #FFC1C1; border: 1px solid red; }
.keyboard-item-focus { background: #00E5EE; }
</style>
<script>
function initCustomKeyboard(jContainer) {
jContainer.find('input, select, textarea').click(function() {
$('.keyboard-focus').removeClass('keyboard-focus');
$('.keyboard-item-focus').removeClass('keyboard-item-focus');
var me = $(this);
if (me.hasClass('keyboard')) {
me.addClass('keyboard-focus');
var parent = me.parent();
if (parent.hasClass('keyboard-item')) {
parent.addClass('keyboard-item-focus');
} else {
parent = parent.parent();
if (parent.hasClass('keyboard-item')) {
parent.addClass('keyboard-item-focus');
} else {
parent = parent.parent();
if (parent.hasClass('keyboard-item')) {
parent.addClass('keyboard-item-focus');
}
}
}
}
});
jContainer.find('.mobile-number-keyboard').find('span').click(function() {
var me = $(this);
var val = me.text();
var box = jContainer.find('.keyboard-focus');
var bval = box.val();
var blen = bval.length
if (box.length > 0) {
if (val === '<') {
if (blen === 0) { return; }
if (blen > 1 && bval.substring(blen-2, blen-1) === ' ') {
box.val( bval.substring(0, blen - 2) );
} else {
box.val( bval.substring(0, blen - 1) );
}
var whichCode = 8;
} else {
var max = box.attr('maxlength');
var whichCode = val.charCodeAt(0);
if (max === undefined || parseInt(max) > blen) {
box.val(bval + val);
} else {
return;
}
}
var ev = $.Event('keydown');
ev.which = whichCode;
box.trigger(ev);
ev = $.Event('keypress');
ev.which = whichCode;
box.trigger(ev);
ev = $.Event('keyup');
ev.which = whichCode;
box.trigger(ev);
}
});
}
$(function() { initCustomKeyboard('#stuff'); }
</script>