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
Related
I need build code such : http://fiddle.jshell.net/bwKZt/152/
but my code dosen't work ! I am a beginner. Please help me.
index.php:
<!DOCTYPE html><html>
<head>
<script>
$("#label").bind("keyup", changed).bind("change", changed);
function changed() {
$("#url").val(this.value);
}
</script>
</head>
<body>
<input type="text" id="label" />
<input type="text" id="url" readonly />
</body>
</html>
Some of the JavaScript here isn't native JavaScript , but is using a plugin called jQuery that makes searching and manipulating HTML elements easier.
When you see $(), that's the jQuery way of finding elements. But it won't work because you don't have jQuery referenced at all.
If you don't want to use jQuery, you can find elements with something like document.getElementById('label').
But lots of people use jQuery to make referencing page elements short and sweet, as with $('#label').
Try to reference jQuery first, like:
<!DOCTYPE html><html>
<head>
<!-- The below line references an externally hosted copy of jQuery 2.2.4 -->
<script type="text/javascript" src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script>
// The below chunk is telling it to bind to the keyup event only AFTER the document has fully loaded.
// Sometimes when your binding code is executed, the elements you wish to bind to aren't loaded yet.
$(document).ready(function(){
$("#label").bind("keyup", changed).bind("change", changed);
});
function changed() {
$("#url").val(this.value);
}
</script>
</head>
<body>
<input type="text" id="label" />
<input type="text" id="url" readonly />
</body>
</html>
The first problem is because you haven't include jquery with a script tag to solve that add this code in the head of you html file if you have the Internet connection to load Jquery from CDN
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script>
or you can download Jquery file from Jquery site and you will have it locally
after that you must execute this code after the executing the jquery ready function
$(document).ready(function(){
$("#label").bind("keyup", changed).bind("change", changed);
function changed() {
$("#url").val(this.value);
}
})
I try to show the datepicker popup (input type="date") immediately after the HTML content has loaded. But in my example below, I get only the alert-message. Clicking the ok-button afterwards shows the alert-message and the datepicker. Is this a timing problem? How can I solve this?
Could only test this with Chrome on Android so far. Finally I want to use this with the Android-App Tasker. There you can show scenes (Dialogs) with HTML content. I would prefer a solution without libraries like jquery.
<!DOCTYPE html>
<html>
<body onload="clickPicker()">
<p>Select date:</p>
<input type="date" id="picker">
<button id="ok" onclick="clickPicker()">OK</button>
<script>
function clickPicker()
{
alert("clickPicker");
document.getElementById("picker").click();
}
</script>
</body>
</html>
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
I have this code
<html>
<head>
<script type="text/javascript" src="my-search.js"></script>
</head>
<body onLoad="my_Init();">
<div>
<form name="id_msearchform" onsubmit="my_EventHandler_Action(); return false;">
<input type="text" name="id_searchphrase" value="example"></input>
<br><br>
<input type="submit" name="id_searchsubmit" value="Search"></input>
</form>
<br><br>
<div id="id_searchresults">No search done...</div>
</div>
</body>
</html>
I don't want the browser to request a new URL. That is why "onsubmit" has "return false;". This code works in Internet Explorer, but Firefox generates a new request. Any ideas what I am doing wrong?
FireBug changes between not wanting to acknowledge there is Javascript reference and showing the Javascript file without any errors... I will update this when i have more to add. I will try various thingsm e.g. try upload it to the net and see if FireFox behaves differently when not running JS on local disk.
Are you sure that you haven't got any errors?
I try with a simple html:
<html>
<head>
<script type="text/javascript" src="my-search.js"></script>
</head>
<body onLoad="my_Init();">
<div>
<form name="id_msearchform" onsubmit="my_EventHandler_Action(); return false;">
<input type="text" name="id_searchphrase" value="example"></input>
<br><br>
<input type="submit" name="id_searchsubmit" value="Search"></input>
</form>
<br><br>
<div id="id_searchresults">No search done...</div>
</div>
</body>
</html>
And a simple javascript called my-search.js in the same path of my html with the next code:
var my_Init = function(){
alert('Hello Onload');
}
var my_EventHandler_Action = function(){
alert('Hello OnSubmit');
}
And it works fine.
Can you show a live demo (with dropbox or something)?
Instead of using a submit button, try using a button and link the javascript function to that.
I want send a form as soon as the page is loaded. All variables in the form are written dynamically and there is no button for submitting.
Does following JS script work in all browsers ?
<script type='text/javascript'> window.onload = function(){ window.document.forms[0].submit(); }; </script>
I doubt window.onload will work in all without any problems.
Thanks in advance...
If you're worried about compatibility in all browsers, how about using jQuery's ready function?
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
window.document.forms[0].submit();
});
</script>
Whilst I would agree that Ken's answer is perfectly acceptable, I don't believe it is correct to include a full-fat JS library just for its .ready() functionality.
For what it's worth, I'd recommend docReady. The size of docReady is 322 bytes gzipped (548 bytes uncompressed).
docReady(function() {
window.document.forms[0].submit();
});
I love jQuery, and I'd even say that there's not much of a perf impact in Ken's answer because it's likely that, if you're using the Google CDN, you've probably already downloaded it during your time on that site or others. But still, it's an unnecessary overhead on what should be a simple page IMO.
Don't use the window.onload (I mean, you can, but is easier/ more logical to do it differently). What you should do is print the form in a hidden div tag, assign an id to the submit button and then use javascript to 'click' it. Here is an example:
<div style="display: hidden;">
<form action="page/site" method="get/post">
<input type="hidden" name="name" value="value" />
<input type="submit" id="formButton" />
</form>
<script language="javascript">
document.getElementById("formButton").click();
</script>
</div>
I hope that helps.