That is when i click on a button
it should fire browser's find event
and browser's find pop up should appear.
You can set your button to call Javascripts window.find function. Works in Chrome and Firefox and possibly Edge.
Javascript
findString = function findText(text) {
window.find(text);
alert("String \x22" + text + "\x22 found? " + window.find(text));
}
HTML
<p>Apples, Bananas, and Oranges.</p>
<button type="button" onClick='findString("Apples")'>Search for Apples</button>
<button type="button" onClick='findString("Banana")'>Search for Banana</button>
<button type="button" onClick='findString("Borange")'>Search for Borange</button>
Here is a website for reference.
https://developer.mozilla.org/en-US/docs/Web/API/Window/find
Related
I'm doing an HTML assignment for a class at university and I was stuck on a problem asking me to create a button with the label “Change color!”. When the button is pressed, a script will execute causing the “green_parakeet.jpg” image to be replaced with “blue_parakeet.jpg”.
When I emailed the professor, she said for me to add onclick="statement" property, e.g. you can call a function here as shown in the example from the LX12 document <button onclick="f(x);">. Then you can write a script language to set up the function in a way that img tag should change src property value to a new one.
Here's my HTML code so far
<img src = "green_parakeet.jpg">
<button> Change Color! </button>
I can't figure out what to do next.
I have created this code according to this.
<script>
function change() {
document.getElementById("image").src = 'blue_parakeet.jpg';
}
</script>
<img id="image" src = "green_parakeet.jpg">
<button onclick="change()"> Change Color! </button>
edit: The code below will remove the onclick.
<script>
function change() {
document.getElementById("image").src = 'blue_parakeet.jpg';
document.getElementById('button').removeAttribute("onclick");
}
</script>
<img id="image" src="green_parakeet.jpg">
<button id="button" onclick="change()"> Change Color! </button>
I have button with tooltip created as
<button class="btn btn-xs btn-light"
onclick="editMaterial(#material.Id)"
title="Upravit materiál" data-tooltip="tooltip">
<i class="fas fa-edit"></i>
</button>
Tooltip is activated using jQuery
$('[data-tooltip="tooltip"]').tooltip()
the issue is that when I click on the button and modal window opens, the tooltip is also open. So the tooltip interfere with the modal.
I tried
$('[data-tooltip="tooltip"]').hide()
$('[data-tooltip="tooltip"]').show()
or
$('body').click()
unsuccessfully, any idea ?
I had the same problem. I fixed it for popper.js v1.x this way:
// FIX: Tooltip not hiding on button cklick
$('[data-toggle="tooltip"]').click(function () {
$('[data-toggle="tooltip"]').tooltip('hide');
});
Hope this helps
My button is acting the way I need it to except when it is clicked on it completely disappears. Why is it doing this?
<script type="text/javascript">
function randomlinks(){
var myrandom=Math.round(Math.random()*6)
var links=new Array()
links[0]="https://abantutogether.org/"
links[1]="https://abantutogether.org/about-us"
links[2]="https://abantutogether.org/donate"
links[3]="https://abantutogether.org/get-involved"
links[4]="https://abantutogether.org/blog"
links[5]="https://abantutogether.org/contact-us"
links[6]="https://abantutogether.org/sponsor-a-child"
window.open(links[myrandom])
}
</script>
<form>
<input type="image" src="https://i.postimg.cc/43PDgqnZ/Logo-Pix-Teller-1.png" value="random link!" onClick="randomlinks()">
</form>
When you click the button another tab/browser window is opened and the page is being submitted. Is this the behavior you expect?
It sounds weird to me the form submission in this circumstance (there is no action attribute set in the form TAG) . Maybe you don't want to have this input inside a form, or alternatively you can just avoid the submmit by changing the onclick property as follow:
onClick="randomlinks(); return false;"
So I am making a simple calculator app. Now I have a button to input '1' in the calculator. What I want is whenever I click on '1' button or press '1' on my keyboard, 1 should be input into the calculator. Here is my code -
<td><input type="button" class="button" name="one" value="1" onclick="calculator.display.value += '1'" onkeypress="if(event.keyCode == 49){calculator.display.value += '1'}"></td>
And my calculator display box is -
<input type="text" name="display" id="display" disabled>
Now what happens is when I click '1' button, 1 is displayed in my display box. But when I press '1' on my keyboard, nothing happens.
But when I click '1' button first, then press '1' on my keyboard, '11' gets into the display box, that is, the input is accepted through the keyboard.
I want this input via keyboard without having to click the button.
Please help.
Thanks in advance.
When you apply the onkeypress event to a specific element, it won't act the way you want it to because the element must be focused in order to catch the key press event, because the event is relative to that element.
let display = document.getElementById("display");
document.body.onkeypress = function() {
// Include all numbers, 0-10
for (var i = 0; i < 10; i++) {
if (event.keyCode == i + 48) display.value += i;
}
};
<html>
<body>
<input type="text" id="display" disabled />
<br>
<button id="btn1" onclick="display.value += '1'">1</button>
<button id="btn2" onclick="display.value += '2'">2</button>
<button id="btn3" onclick="display.value += '3'">3</button>
</body>
</html>
And on another note, somehow unrelated to the question but has been brought up here, regarding inline JS - it is generally considered bad practice. Some cases might justify it, but it is general consensus that it should be avoided. Read more:
Is inline JavaScript good or bad?
Why Inline CSS And JavaScript Code Is Such A Bad Thing
Reddit - why is inline onclick="function()" considered such a bad practice?
The problem is the position of your onkeypress(), if you move that out of the input tag for example in the <body> or in your <table> you could have a bigger "focus zone" where the event could be caught:
<head>
<script>
function onClick(val)
{
document.getElementById("display").value += val;
}
function onPress()
{
switch(event.keyCode)
{
case 49: document.getElementById("display").value += 1;
break;
case 50: document.getElementById("display").value += 2;
break;
}
}
</script>
</head>
<body onkeypress="onPress()">
<table>
<td>
<input type="button" class="button" name="one" value="1" onclick="onClick(1)">
</td>
</table>
<input type="text" name="display" id="display" disabled/>
</body>
Hope this help :)
onkeypress works only if the focus is on the button. If you don't click the button first, the focus isn't on the button and the button can't recognize the keypress. As soon as you click the button, it gets the focus and it can recognize the keypress.
You could try adding the onkeypress event to your body tag.
<body onkeypress="if(event.keyCode == 49){calculator.display.value += '1'}">
As mentioned in another answer onkeypress will only work if the element is focused. Also you should no use inline JS but let both event refer to a function which you execute when the event occurs. Here is an example with an input element.
function myFunc () {
alert("event happening");
}
input:focus {
background-color: red;
}
<input onkeypress="myFunc()" onclick="myFunc()"/>
When the element is clicked the event fires. Also when the element is focused and a key is pressed the event fires. Hopefully this is helpful.
I've created an overlay that loads content dynamically after it opens, but am having issues with VoiceOver in Safari when trying to add ARIA attributes.
After only adding role='dialog' to the overlay container, it is announced as a dialog, but reads the text contents first ("close loading... dialog close button").
When adding a label to the dialog with either aria-label and aria-labelledby the real problem occurs. The overlay is announced nicely ("Overlay dialog close button"), but then the rest of the dialog's contents are inaccessible after being loaded, and it just appears that the close button is the last (and only) item available.
HTML:
<div id="page">
<a id="opendialog" href="#" role="button">Open</a>
</div>
JavaScript:
jQuery(function ($) {
$('#opendialog').click(function (event) {
event.preventDefault();
// Attach the dialog container to the page with a loading placeholder.
$dialog = $('<div id="dialog" role="dialog" aria-labelledby="dialog-label">' +
'<span id="dialog-label">Overlay</span>' +
'close' +
'<div class="content"><span class="loading">Loading...</span></div>' +
'</div>')
.insertAfter('#page');
$dialog.find('.close').focus();
// Hide the other page contents to trap the user in the dialog.
$('#page').hide();
$dialog.find('.close').click(function (event) {
event.preventDefault();
$dialog.remove();
$('#page').show();
$('#opendialog').focus();
});
// Simulate an asynchronous request for the dialog contents.
setTimeout(function () {
$dialog.find('.content .loading')
.replaceWith('<div>Dialog Content</div>');
}, 250);
});
});
http://codepen.io/gapple/pen/FGhzl
Chrome also seems to have some weird issues with the codepen when in an iframe, but loading the iframe url directly seems to work correctly.
VoiceOver is quite persnickety when it comes to dynamic content and focus. This (if run on a page of any size) will not work at all on iOS because the .focus() on dynamic content does not work unless executed in a timeout of at least 500 ms (look here http://unobfuscated.blogspot.com/2013/08/messed-up-ios-focus-management-with.html).
However, for OS X, you can fix your problem by focussing on the dialog itself rather than the close button. Here is the snippet of code modified so it works. Once the focus is on the dialog, hit CTRL-OPTION DOWN to interact with the dialog content
$dialog = $('<div id="dialog" role="dialog" aria-labelledby="dialog-label" tabindex="-1">' +
'<span id="dialog-label">Overlay</span>' +
'close' +
'<div class="content"><span class="loading">Loading...</span></div>' +
'</div>')
.insertAfter('#page')
.focus();