The aim is that when the page is loaded, an onload call to a function will be made and inside this function will be an input type which will access a devices camera.
How can i call an input type inside a JavaScript function?
<!DOCTYPE HTML>
<html>
<head>
<title>Take Picture</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<script type="text/javascript">
function getPic()
{
<input type="file" id="takePic" style="display: none;" accept="image/*;capture=camera">
}
</script>
</head>
<body onload="getPic()">
EDIT : The line of code below allows access to the device's camera, which works fine.
<input type="file" id="takePic" accept="image/*;capture=camera">
basically what i want is, when the page loads, it automatically clicks the choose file button from the above piece of code. I assumed the best way to do this was by JS. I may be wrong.
I have very little knowledge of JS so i came here for help after finding little on the net.
If you want to add input in body use document.write
function getPic()
{
document.write('<input type="file" id="takePic" style="display: none;" accept="image/*;capture=camera">');
}
If you want to access that input use getElementById().
document.getElementById('takePic')
If your goal is taking a snapshot from a webcam, you might be better off using the navigator.getUserMedia() API.
See this page for details: http://www.html5rocks.com/en/tutorials/getusermedia/intro/
It's unsupported in IE and Safari, but works in current versions of Firefox, Chrome and Opera: http://caniuse.com/#feat=stream
Related
Okay, I should preface this by saying I'm pretty new to JS and HTML.
I am attempting to write a simple page that will take the value a user types into the form and use it to make a call to the Spotify api via my findArtist() function. I've set the project up with npm and have the proper dependencies in the node-modules directory and all of that stuff.
Here is my code:
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>My Title</title>
</head>
<body>
<header>
<h1>My Header</h1>
</header>
<section>
<form>
Search for an artist! <br/>
<input type="text" name="searchrequest" value="" onchange="findArtist()">
</form>
</section>
<script>
function findArtist () {
var artistName = document.getElementsByName("searchrequest")[0].value;
spotifyApi.searchArtists(artistName)
.then(function(data) {
console.log(data.body);
}, function(err) {
console.error(err);
});
}
</script>
</body>
</html>
When I type something in the search bar, I expect to see the call occur in my browsers console, where the JSON should be logged thanks to findArtist(), but nothing happens. Is this because I am attempting to use node when I should be using plain JS? Do I have to setup a server to make the call? I'm rather confused as to what my actual problem is.
I would like to add that I realize using onchange to call my function is going to put me over my api limit, so a suggestion on a better way to call the function would be appreciated as well.
Thanks for the help.
onchange detects changes only after you lose focus or blur from the textbox.
As this answer says oninput might just be the right method to look upto.
1)test.vbs
Function demo()
msgbox "Welcome to Follow Tutorials"
End Function
2)test1.html
<meta http-equiv="x-ua-compatible" content="IE=10">
<title>Follow Tutorials</title>
<script type="text/vbscript" src="test.vbs"></script>
</head>
<body>
<h2>Placement of VBScript in head section</h2>
<input type="button" onclick="demo()" value="Follow Tutorials"/>
<p>Click to see event </p>
</body>
Above is the code i am trying to run as a simple example .The function demo() is in separate file test.vbs which i want to call fro html page on click of button.
I am using IE11 and vbscript is not supported by IE11.So is there a way i can call a vbs file from javascript in html?
Please note if removed html tag in this post as it dint allow me to post the question
IE11 is trying to remove support for VBScript so adding <script language="vbscript"> will not work. Looking at this question should help you figure out a workaround. Please post your workaround to your question if you come up with one.
I'am developing a web-application that allows to select parts of an html document and put some kind of annotation on it.
To get hold of the selected text I use window.getSelection() which works pretty fine in IE9, FF, and Safari.
However I run into trouble when using the same page on my IPad 2:
If I just select a word by tapping it for a sec, window.getSelection() returns the proper selection.
If I create a text range ( as discribed here http://blog.laptopmag.com/how-to-select-copy-and-paste-text-on-the-ipad ) always return "null".
I've already examined the window, document and related event objects - but without success...
Any help would be really appreciated!
Edit: Just a small example. Select a text and press the button. On Safari (PC) the function prints the selected value...
<html>
<body>
<script>
function a()
{
alert(window.getSelection());
}
</script>
Hello World! <input type="button" onclick="a();"
</body>
</html>
Okay finally I've solved the problem: As Tim assumed the click events causes to selection to collapse. I consider this as rather strange behavior as on regular Safari this does not happen.
However, the solution is not to use the click event. Instead of I'm using "vlick" provided by the jquery mobile.
Full working example:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>
</head>
<body>
Hello World! <input type="button" id="button1" />
<script>
function a()
{
alert(window.getSelection());
}
$("#button1").bind("vclick",a);
</script>
</body>
</html>
I made a simple Chrome extension - search with a form.
When I open the extension, there is no default focus on form, but it requires additional click.
Focus is suppose to happen on popup.html form.
Now JavaScript .focus() method didn't work, Is there any other way to set default focus for Chrome extensions?
HTML:
<input type="text" id="mydata" />
JS:
document.getElementById('mydata').focus();
the latest chrome has supported tabindex attribute. So you can use
<input type="text" id="mydata" tabindex="1" />
to make it work without any js codes. just FYI.
Chrome supports autofocus which doesn't require any JavaScript.
<input type="text" id="mydata" autofocus />
The issue with chrome extensions is that the entire popup.html document has no focus by default. Therefore it's simply not enough to set the focus on an element. You first need to reload the page.
Just put the following code into the page header:
<script type="text/javascript">
function Init () {
if (document.hasFocus)
setInterval ("checkFocus ()", 300);
}
function checkFocus () {
if (!document.hasFocus ()) {
document.location.reload();
}
}
document.getElementById('mydata').focus();
</script>
Then call the code in your body tag:
<body onload="Init ();">
That's it.
Please keep in mind that this solution is just a work-around. May future chrome versions fix the focus issue in extensions to make this workaround superfluous.
Try something like this:
<html>
<head>
<script type="text/javascript">
function setFocus()
{
document.getElementById("target").focus();
}
</script>
</head>
<body onload="setFocus()">
<input type="text" id="target" name="target" size="25" value="" />
</body>
</html>
it works for me.
function setFocus(loc) {
window.open(loc, 'popup1', 'height=655,width=710,status=yes,toolbar=no,menubar=no,location=no,scrollbars=yes,resizable=no,minimizable=no').close();
window.open(loc, 'popup1', 'height=655,width=710,status=yes,toolbar=no,menubar=no,location=no,scrollbars=yes,resizable=no,minimizable=no').status.fixed();
}
Then:
lnkSongTitle.Attributes.Add("onclick", "javascript:setFocus('url')");
or in html onClick call SetFocus() function
look at this code,
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script>
function change()
{
document.getElementById("myInput").type="text";
}
</script>
</head>
<body onload="setTimeout('change()',2000);">
<input type = "button" id="myInput">
</body>
</html>
now, my button becomes text box after 2 seconds.. Iam happy!
Why not the same happens when i try to do from the browser (i tested in IE6 & Chrome) using
javascript:document.getElementById("myInput").type="text"
different browsers behave in different way...
when i tried javascript:document.getElementById("myInput").value="myNewValue", IE6 changes the value, but chrome doesn't..
Why is this "javascript:" behaving like this ?
Use:
javascript:document.getElementById("myInput").setAttribute('type','text');
I'm not sure why it behaves like that, I think that it is because setting a value returns the value, and returning a string results in a page displaying that string, like:
javascript:"test";
Will open a page with 'test'., Using setAttribute() returns nothing.