The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
 Reply to this topicStart new topic
> Click Button on Enter
Rating  5
Ryder Cragie
post Jul 11 2022, 03:00 AM
Post #1





Group: Members
Posts: 1
Joined: 11-July 22
From: United Kingdom
Member No.: 28,435
I have the following HTML and I'd like to have the "Shorten" button be clicked when Enter is pressed. Can someone help with this please?


<html>
<center>
<head>
<title>Ryder Cragie - Link Generator</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link>
</head>
<style>
@import url(https://fonts.googleapis.com/css2?family=Roboto:wght@400&display=swap);
body{
font-family: 'Roboto', sans-serif;
font-size: 3vw;
scrolling: no;
overflow: hidden;
}
/* desktop styles */
@media screen and (min-width: 600px) {
body {
font-size: 20px;
font-weight: 400;
}
}
.text-vertical-center{
width: 100%;
height: 100vh;
display: table-cell;
vertical-align: middle;
padding-right:20px;
padding-left:20px
}
:root {
color-scheme: light dark;
}
</style>
<body>
<div class="text-vertical-center">
<h1 class="message">Shorten your first link!</h1>
<div>
<input name="text" type="url" value id="linkinput" placeholder="Paste or type a URL to shorten." size="25">
<input type="submit" id="myinput" value="Shorten">
</div>
<p id="message"></p>
<script>
document.getElementById("myinput").onclick = function() {
var link = document.getElementById("linkinput").value;
var data = {
"domain":"public.ryder.link",
"originalURL": link,
"allowDuplicates":false };
fetch('https://api.short.cm/links/public', {
method: 'post',
headers: {
'accept': 'application/json',
'Content-Type': 'application/json',
'authorization': 'API_KEY'
},
body: JSON.stringify(data)
}) .then(function(response) {
return response.json();
})
.then(function(data){
document.getElementById("message").innerHTML = "Your short link is " + data.shortURL })
document.getElementById("linkinput").value='';
}
</script>
<p> URL shortener by Ryder Cragie.</p>
</div>
</body>
</html>
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Jul 11 2022, 03:56 AM
Post #2


.
********

Group: WDG Moderators
Posts: 9,656
Joined: 10-August 06
Member No.: 7
See if any of these are helpful:
https://quirksmode.org/js/keys.html
https://developer.mozilla.org/en-US/docs/We...rdEvent/keyCode
https://developer.mozilla.org/en-US/docs/We...boardEvent/code

(If it was an HTML form, pressing enter would normally submit it, but in this case it seems the javascript just produces a link instead of submitting a form.)
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
« Next Oldest · Markup (HTML, XHTML, XML) · Next Newest »
 

Reply to this topicStart new topic
2 User(s) are reading this topic (2 Guests and 0 Anonymous Users)
0 Members:

 

Display Mode: Standard · Switch to: Linear+ · Switch to: Outline

Track this topic · Email this topic · Print this topic · Subscribe to this forum

- Lo-Fi Version Time is now: 24th April 2024 - 02:03 PM
Invision Power Board © 2024  IPS, Inc.
Licensed to: HTMLHelp.com, LLC