I have a problem with my HTML-Website.
I would like to have a text field which generates a link after entering and pressing a button from the input. For example, in the text field is "development" and by pressing the button should my browser go to "www.laurensk.at/development".
I don´t have the code for that...
I've understood your question, you can do it using JQuery or Javascript
$("#btnGoto").click(function(){
window.location="www.laurensk.at/"+$("#txtPage").val();
});
I hope this will help you.
You can use the addEventListenerfunction to generate the link when there is a new input in the field.
Example:
var path = document.getElementById("path")
var link = document.getElementById("link")
function makeLink() {
link.href = "http://my.web.site/" + path.value
link.innerHTML = "http://my.web.site/" + path.value
}
path.addEventListener("keyup", makeLink)
<input id="path"/>
<br>
<a id="link" target="_blank"></a>
Documentation: EventTarget.addEventListener() - Web APIs | MDN
Related
I'm building a simple webpage.
I wanna select the text inside a <div> and then open a new tab in the same browser and do a Google search for that text with the click of a button. Right now, I just have the solution to copy to clipboard with a button click. Is there any workaround for this...?
I'm OK with using either Google Chrome or Firefox as it's just for a local project. Not meant for public hosting.
UPDATE : I actually need to copy text which is rendered by other HTML code inside the div. I don't wanna copy the code inside the div also.
For reference, here is a code snippet that I used to make my copy to clipboard function.
JavaScript:
function CopyToClipboard(containerid) {
if (document.selection) {
var range = document.body.createTextRange();
range.moveToElementText(document.getElementById(containerid));
range.select().createTextRange();
document.execCommand("copy");
} else if (window.getSelection) {
var range = document.createRange();
range.selectNode(document.getElementById(containerid));
window.getSelection().addRange(range);
document.execCommand("copy");
alert("Copied the text. Use Ctrl+V to paste on Google")
}
}
HTML:
<div class="search" id="div1">
<!--Text to search for (here, CEO of Google)-->
<span>CEO of Google</span>
</div>
<button id="button1" class="button" onclick="CopyToClipboard('div1')">Copy question</button>
This code selects just the text inside the div and then copies it. I don't wanna search for the rest of the code....
Try with the code below.
You can find out more information about how to redirect from your page here.
<html>
<body>
<div id="search_this">New text</div>
<button type="button" onclick="myButtonOnClick()">Search!</button>
</body>
<script>
function myButtonOnClick(){
let url = "https://www.google.com/search?q=";
let searchText = document.getElementById("search_this").innerHTML;
debugger;
window.open(url + searchText);
}
</script>
</html>
This code does the job:
function searchMe() {
var stringQuery = document.getElementById('text_div').innerHTML;
var query = "https://www.google.com/search?q=" + stringQuery.split(' ').join('+');
window.open(query);
}
<div id="text_div" onClick="searchMe();">
Kittens
</div>
Note: Does not work here on stackoverflow but I've tested it in a custom html file and it works.
OK I've got a workaround. Hope it helps someone else with the same problem. A special thanks to both #Daan Seuntjens and #Alex Dragnea for sharing answers as I have used their basic method.
Here, I've selected the text in the <div> and stored it int the range variable which was used earlier for the copy to clipboard function. And then, I did I used another variable query just like both the answers earlier told to add the text https://www.google.com/search?q= to the beginning of the text. And then, I did window.open(query); to open it in another tab and then do a Google search..
NOTE : This code doesn't run here on Stack Overflow. But, I have tested it externally. It is verified and ready to go...
function search(containerid) {
if (window.getSelection) {
var range = document.createRange();
range.selectNode(document.getElementById(containerid));
window.getSelection().addRange(range);
var query = "https://www.google.com/search?q=" + range;
window.open(query);
}
}
<div class="question" id="div1">
<!--Text to search for (here, CEO of Google)....-->
<span>CEO of Google</span>
</div>
<button class="button" onclick="search('div1')">Search</button>
I am trying to add link of same hyperlink of same link in html but it not linking
in html
simple add a link http://www.test.com/test
but link is not generating
I want to change automatically result as http://www.test.com/test
for example http://www.test.com/test
You can do this with a simple script.
Step 1: Add hyperlink with id
Link Comes Here
Step 2: On dom ready get page url and update the href value with jQuery.
$(document).ready(function() {
var url = window.location.href;
// if you have static url you can hard code like
// var url = "http://www.url.com";
$("#link").attr("href", url)
});
try this in you HTML:
<span>http://www.test.com/test</span>
else try to use jquery like this:
HTML:
JQuery:
$(document).ready(function(){
$("#myLink").text("http://www.test.com/test");
});
If a text input tag is placed inside an anchor, then in Firefox (on Windows) it is not possible to manipulate text inside the text box — text cursor doesn't change its position, and it is not possible to select the text. In Chrome you can change cursor position, but not select the text.
In some cases we can set the parent to be something else than anchor, yet is there a way to avoid this behaviour in general?
Here's the HTML code:
<p>No text select in FF:</p>
<a href="#">
<input type="text" value="7777" />
</a>
<p>Working text select in FF:</p>
<span>
<input type="text" value="8888" />
</span>
And the fiddle.
You can remove the href attribute when the input element is focused. As long as there is no href attribute, you will be able to select text inside the input field (tested in safari, chrome and firefox).
<a href="http://www.google.de" id="link">
link
<input type="text" id="input">
</a>
(function () {
var link = document.getElementById('link');
var input = document.getElementById('input');
var saveHref = null;
input.addEventListener('focusin', function () {
savedHref = link.href;
link.removeAttribute('href');
});
input.addEventListener('focusout', function () {
link.href = savedHref;
savedHref = null;
});
})();
Working example:
http://codepen.io/jjd/pen/JYwLVr
its because of the implementation error in browser.
actualy when we clicking browser it will look for the type of object
in this way
1.is this a link
2.is this any other type( input area,image,
why it first checking for type "link"
because clickig is firstly implemented for opening links,
anf its main usage is for open links
it detect first it as a link then it will call the
. openlink(example) function
I am trying to create a custom share link so on click it will share the current URL.
I understand this
<a href="http://twitter.com/share?text=An%20Awesome%20Link&url=http://www.google.com">
Share This on Twitter</a>
But is there any way to make it dynamic, so it will grab the URL of the page the user is on and share that, rather than a hard coded link.
Thanks
In Javascript you can use :
document.URL
It gives you the current url
https://developer.mozilla.org/en-US/docs/DOM/document.URL
and
document.title
for getting the title of this page
https://developer.mozilla.org/en-US/docs/DOM/document.title
with jQuery or javascript you can set the href attribute
http://docs.jquery.com/Attributes/attr
https://developer.mozilla.org/en-US/docs/DOM/stylesheet/href
Example:
$('a').on('click', function() {
$(this).attr('href',
'http://twitter.com/share?text='+document.title+'&url=' + document.URL);
});
Another way:
https://dev.twitter.com/docs/tweet-button
With jQuery:
$('a').on('click', function() {
document.location = 'http://twitter.com/share?text=' + document.title + '&url=' + window.location.href;
});
Use this
<a data-count='horizontal' expr:href='data:post.canonicalUrl' href='http://twitter.com/share' rel='nofollow' target='_blank'>Share on twitter</a>
Putting expr:href='data:post.canonicalUrl' does the trick.
nonetheless,twiiter gives you an option while generating buttons
(source: ctrlv.in)
I have a button that is accessed by a keyboard shortcut but the users have to press ALT+Z. Is there anyway to let the users access the button by simply pressing Z (or some other key) without having to press ALT?
Many thanks,
<input style="display:none;" id='stopButton1' type="button" value="Z" onclick="stop('z')" accesskey="z" />
No that is not possible in pure HTML.
JavaScript is needed: Use the keypress event to detect specific character codes, and call some function.
We can use jquery 2.1.3 plugin and keypress with ASCII value
JS:
$(document).keypress(function (e) {
if (e.which == 72 || e.which==104) {
window.location.replace("http://soluvations.in");
}
});
HTML:
<p>Press H/h to go to Home Page</p>
Here is
JSFIDDLE link
I landed on this page looking for a quick way to make accesskey operate without the modifier (alt) key.
If anyone else is looking for the same, I have added this to my page:
$(document).on('keydown', function(e) {
var link = $("a[accesskey=" + e.key + "]");
if (link.length) {
window.location = link.attr('href');
}
});
This will capture keypresses, and if there is a link with that accesskey set, it will redirect to its href.