I Have normal html file webview with input and button; i have success to make button paste the text from clipboard when i click on it; i tested the project in google chrome in pc and is working good;
i put the html file in webview with android studio and the app working and i show the page but nothing happing when i click on the button
this is part frome the webview:
webframe.loadUrl("file:///android_asset/index.html")
webframe.settings.javaScriptEnabled = true
webframe.settings.allowFileAccess = true
webframe.settings.domStorageEnabled = true
and this is html cole:
<input class="form-control" id="url_input" type="text" value="" />
<button id="past_btn">
img src="images/copy.svg" width="22px" height="22px" />
</button>
<script>
$('#past_btn').click(function(){
$('#url_input').not(function(){
paste(this) ;
});
});
async function paste(input) {
const text = await navigator.clipboard.readText();
input.value = text;
}
</script>
this html working in Chrome and Mozilla.
Thank You
Related
Firstly, I am sorry to anyone that finds this post more than a little trivial, but I am currently sratching my hair out on, at first sight, is a form posting matter.
I am developing an ASP.NET MVC 6 application which is running perfectly in Chrome and Edge, but recently, I was informed that it would also need to be able to run on IE11.
My issue is when a submit the form.
$("#js-form").on("submit", function (e) {
document.getElementById("DefinitionID-error").style.visibility = "hidden";
document.getElementById("DefinitionID-error").textContent = "<some text>";
document.getElementById("DefinitionID-error").style.visibility = "visible";
}
The code appears to execute in the IE11 debugger, with no error messages, but on screen the original text held in #DefinitionID-error does not change.
The version of IE11 I am using, is the super special version that ships with Windows 10.
Other code I have tried include:
$("#js-form").on("submit", function (e) {
$("#DefinitionID-error").hide();
$("#DefinitionID-error").text("<some text>");
$("#DefinitionID-error").show();
}
$("#js-form").on("submit", function (e) {
$("#DefinitionID-error").html("<span id='DefinitionID-error'>Some text</span>");
}
$("#js-form").on("submit", function (e) {
document.querySelector("#DefinitionID-error").textContent = "<some text>";
}
$("#js-form").on("submit", function (e) {
document.querySelector("#DefinitionID-error").innerHTML = "<span id='DefinitionID-error'>some text</span>";
}
All of these work in Chrome and funnily enough Edge, but not in IE11.
NEW Example that also does not work
$("#js-form").on("submit", function (e) {
$("#DefinitionID-error").hide();
$("#DefinitionID-error").text("Some text");
$("#DefinitionID-error").show();
}
UPDATE
If I take the jQuery code, or the javascript code and run it in the debugger in IE11. it works, so it must have something to do with the submission, maybe.
I made a test with code below on windows 10, Internet Explorer 11. It is working fine on Ie 11.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#clk").click(function(){
$("#js-form").submit();
console.log(222);
});
$("#js-form").on("submit", function (e) {
console.log("start");
$("#DefinitionID-error").hide();
$("#DefinitionID-error").val("Some text");
$("#DefinitionID-error").show();
alert("Form submitted");
});
});
</script>
</head>
<body>
<button id="clk">Click me to submit form</button>
<form id="js-form">
First name:<br>
<input type="text" id="DefinitionID-error" name="DefinitionID-error" value="Mickey">
<br>
Last name:<br>
<input type="text" name="lastname" value="Mouse">
<br><br>
<input type="submit" value="Submit">
</form>
</body>
</html>
Output in IE 11:
I am working on a project that are able to run in both Chrome and IE.My problem is after I change some part of the code to open the modal dialog using jQuery UI, the b.jsp cannot use in IE and Chrome, so I try to change it to window.onload. It works for Chrome but not for IE.In the console,it return "Not implemented". I have 2 jsp file, a.jsp file is the parent page and b.jsp file is the pop up modal dialog.
In my b.jsp ,
<html>
<head>
//some script here
</head>
<body onload = "getData();" >
<form name="form1">
//form table here
</form>
</body>
</html>
Function getData() are from a.jsp,
function getData(){
var materialDesc = document.getElementById("materialDesc").value;
if(materialDesc== "materialDesc[1]"){
alert("No record");
var materialDesc = '';
$("#openModalDialog").dialog("close");
}else{
for(var i=0; i< materialDesc.length;i++)
{
document.all.detail_desc.options[i] = new Option(materialDisplay[i]);
document.all.detail_desc.options[i].value = materialDesc[i];
}
}
}
The message error:
Where is my mistake? I was thinking that the error is cause by the function. Thank you.
I initially saw this code online, that allows users to upload files to their google drive through a page. The script automatically creates a folder
//https://script.google.com/d/12EnDFZrsfpBubZ9lM7pnHIsn9M49_vyXm0TLBQ_pyx_ViAJH3HXgkoe9/edit?newcopy=true
So you will notice that initially the codes is supposed to be deployed as a webapp but I tweaked it to make it run on the sidebar. The html part loads fine, you can actually key in all the data, but once you click the upload form, it just returns a blank page. I'm pretty convinced that it's because the click button is not connecting to the script again, making it fail
This is the original code
/* The script is deployed as a web app and renders the form */
function doGet(e) {
return HtmlService.createHtmlOutputFromFile('form.html')
.setSandboxMode(HtmlService.SandboxMode.NATIVE);
// This is important as file upload fail in IFRAME Sandbox mode.
}
/* This function will process the submitted form */
function uploadFiles(form) {
try {
// Name of the Drive folder where the files should be saved
var dropbox = "Database";
;
var folder, folders = DriveApp.getFoldersByName(dropbox);
// Find the folder, create if the folder does not exist
if (folders.hasNext()) {
folder = folders.next();
} else {
folder = DriveApp.createFolder(dropbox);
}
// Get the file uploaded though the form as a blob
var blob = form.myFile;
var file = folder.createFile(blob);
// Set the file description as the name of the uploader
file.setName(form.myCode + " " + form.myfilename + " - " + form.myID + " - " + form.myName);
file.setDescription("Uploaded by " + form.myName + " - " + form.myEmail);
// Return the download URL of the file once its on Google Drive
return "File uploaded successfully, please check your drive with this link for confirmation: " + file.getUrl();
} catch (error) {
// If there's an error, show the error message
return error.toString();
}
}
AND THE HTML IS HERE
<!-- Include the Google CSS package -->
<link rel="stylesheet" href="https://ssl.gstatic.com/docs/script/css/add-ons.css">
<!-- You can also include your own CSS styles -->
<style>
form { margin: 40px 20px auto; }
input { display:inline-block; margin: 20px; }
</style>
<script>
// The function will be called after the form is submitted
function uploadFile() {
document.getElementById('uploadFile').value = "Uploading File..";
google.script.run
.withSuccessHandler(fileUploaded)
.uploadFiles(document.getElementById("labnol"));
return false;
}
// This function will be called after the Google Script has executed
function fileUploaded(status) {
document.getElementById('labnol').style.display = 'none';
document.getElementById('output').innerHTML = status;
}
</script>
<!-- This is the HTML form -->
<form id="labnol">
<!-- Text input fields -->
File Upload<br>
<br>
Your Name:<br>
<input type="text" name="myName" placeholder="Your name.."> <br><br>
Email Address: <br>
<input type="email" name="myEmail" placeholder="Your email.."> <br><br>
ID? <br>
<input type="number" name="myID" placeholder="Your ID.."> <br><br>
Upload Code: <br>
<input type="text" name="myCode" placeholder="Your Upload code.."> <br><br>
File Name: <br>
<input type="text" name="myfilename" placeholder="Your File Name"> <br><br>
<!-- File input filed -->
<input type="file" name="myFile">
<!-- The submit button. It calls the server side function uploadfiles() on click -->
<br>
<input type="submit" id="uploadFile" value="Upload File"
onclick="this.value='Uploading..';uploadFile();">
</form>
<!-- Here the results of the form submission will be displayed -->
<div id="output"></div>
So from the original code I tweaked it to replace the top part
function showSidebar() {
var html = HtmlService.createHtmlOutputFromFile('form')
.setTitle('Upload Form')
.setWidth(250);
SpreadsheetApp.getUi() // Or DocumentApp or FormApp.
.showSidebar(html);
}
// This function will process the submitted form
function uploadFile(form) {
try {
// Name of the Drive folder where the files should be saved
var dropbox = "Database";
;
var folder, folders = DriveApp.getFoldersByName(dropbox);
// Find the folder, create if the folder does not exist
if (folders.hasNext()) {
folder = folders.next();
} else {
folder = DriveApp.createFolder(dropbox);
}
// Get the file uploaded though the form as a blob
var blob = form.myFile;
var file = folder.createFile(blob);
// Set the file description as the name of the uploader
file.setName(form.myCode + " " + form.myfilename + " - " + form.myID + " - " + form.myName);
file.setDescription("Uploaded by " + form.myName + " - " + form.myEmail);
// Return the download URL of the file once its on Google Drive
return "File uploaded successfully, please check your drive with this link for confirmation: " + file.getUrl();
} catch (error) {
// If there's an error, show the error message
return error.toString();
}
}
So I basically replaced the top part with a script to load the sidebar and the html "form" but the error appears is that upon clicking upload, it does not work.
I'm guessing it's this part
<input type="submit" id="uploadFile" value="Upload File"
onclick="this.value='Uploading..';uploadFile();">
since onClick, it should run the function uploadFile() but it does not work.
I've been trying to figure this out for quite some time but can't seem to make this last part work. So I'm here asking if anyone can help me solve this coding issues
Based from this documentation: HTML Service: Communicate with Server Functions
google.script.run is an asynchronous client-side JavaScript API that allows HTML-service pages to call server-side Apps Script functions. The following example shows the most basic functionality of google.script.run — calling a function on the server from client-side JavaScript.
Check how the Form communicates with Apps Script. If you call a server function with a form element as a parameter, the form becomes a single object with field names as keys and field values as values. The values are all converted to strings, except for the contents of file-input fields, which become Blob objects.
Here is there sample code:
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<script>
// Prevent forms from submitting.
function preventFormSubmit() {
var forms = document.querySelectorAll('form');
for (var i = 0; i < forms.length; i++) {
forms[i].addEventListener('submit', function(event) {
event.preventDefault();
});
}
}
window.addEventListener('load', preventFormSubmit);
function handleFormSubmit(formObject) {
google.script.run.withSuccessHandler(updateUrl).processForm(formObject);
}
function updateUrl(url) {
var div = document.getElementById('output');
div.innerHTML = 'Got it!';
}
</script>
</head>
<body>
<form id="myForm" onsubmit="handleFormSubmit(this)">
<input name="myFile" type="file" />
<input type="submit" value="Submit" />
</form>
<div id="output"></div>
</body>
</html>
It would be best if you simplify how you call the function in an OnSubmit event. Also, you can debug you script using Execution Transcript, which is a record of each call to a Google Apps Script service that is made while the script runs.
Hope this helps!
My app is built with a placeholder where a file is read directly when "load" is clicked.
<button id="loadbutton" type="button" class="btn btn-success" onclick="showTheFile()">Load</button></a>
showthefile() does some stuff and then makes a call to...
var keyMapLoc = '\\path\\to\\file.txt';
function readKeys(ffile) {
// read the keyfile
var ffile = ffile || keyMapLoc;
return fs.readFileSync(ffile, 'utf8');
}
This reads the file into the app where it is parsed, yotta yotta.
I followed these instructions and used the demo. The file dialog pops as soon as the app is opened, which I get.
<html>
<body>
<input style="display:none;" id="fileDialog" type="file" />
<script>
function chooseFile(name) {
var chooser = document.querySelector(name);
chooser.addEventListener("change", function(evt) {
console.log(this.value);
}, false);
chooser.click();
}
chooseFile('#fileDialog');
</script>
</body>
</html>
However, even though I understand how to make a file dialog pop and I understand how to read/parse a file, I'm having a hard time working this very abstract example into my existing nwjs app.
Based on the above sample of my app, how should I blend in the demo so that the "load" button operates as expected for loading a file?
Since you didn't provide your code, I'll go off the demo. What you need to do
is trigger the click event of the file input element and then upon a
change event, call readKeys().
<!DOCTYPE html>
<html>
<body>
<input style="display:none;" id="fileDialog" type="file"/>
<button id="loadButton" type="button" class="btn btn-success"
onclick="showTheFile()">Load</button>
<script>
var fs = require('fs');
var keyMapLoc = '\\path\\to\\file.txt';
var chooser = document.querySelector("#fileDialog");
// Set up the file chooser for the on change event
chooser.addEventListener("change", function(evt) {
// When we reach this point, it means the user has selected a file,
// so invoke readKeys().
// this.value contains the path to the selected file
console.log(readKeys(this.value));
}, false);
function showTheFile() {
// Trigger click event on the chooser, this will bring up the
// dialog
chooser.click()
}
function readKeys(ffile) {
var ffile = ffile || keyMapLoc;
return fs.readFileSync(ffile, 'utf8');
}
</script>
</body>
</html>
so I'm trying to set up upload size limit, but it has been unsuccessful.
I have included the code with explanations, please hava a look and I would be very thankfull if you could help me.
More information on wha I needм help with is after the " // "
Here's the code: `
<html>
<p id="check"></p>
//ok so this part of <script> sends the user to "email.html"
<script type="text/javascript">
function getFile(){
document.getElementById("file").click();
}
function sub(obj){
var file = obj.value;
document.myForm.submit();
}
</script>
//here's the code for the button to upload a file (or image in my case)
<form action="e-mail.php" method="post" enctype="multipart/form-data" name="myForm">
<div id="yourBtn" onclick="getFile()">Yes</div>
<div style="text-align: center; overflow: hidden;">
<input type="file" value="upload" id="file" accept="image/*"
onchange="sub(this)"
size="1" style="margin-top: -50px;" "margin-left:-410px;" "-moz-opacity: 0;
"filter:
alpha(opacity=0);" "opacity: 0;" "font-size: 150px;" "height: 100px;">
</div>
</form>
<script>
var attachement = document.getElementById('file');
attachement.onchange = function() {
var file = attachement.files[0];
if (file.size < 1000000) {
function sub(obj){return true; }
//ok so here's the problem,
when I include this code between
'script' the user is not taken
to "e-mail.html" anymore... please help!!!
else { return false;}
}
}
</script>
</html> `
Thanks a lot:)
To go to a different page when the file is too big, you can assign the new URL to document.location. Note that the URL should be absolute (i.e. http://.../email.html).
I suggest to display an error when the file is too big and simply not submit the page. Otherwise, the user will see the new page and believe that everything was all right.
Also note that you need to do the same check on the server because an attacker might just create a POST request from scratch (without using the code from your page) to send files of arbitrary size to your server.
Because the funtion inside of the onchange is not global. It is only available to the onchange.
would would need to change it to
window.sub = function (obj){return true; }
BUT the flaw with this is the user can change the file a second time and submit since you just removed the return false. You could either add it back in on the else OR you can do validation when the form is submitted and not onchange.