Home > Article > Web Front-end > JavaScript converts hyperlinks in specified areas of web pages into URLs
This article will introduce to you how to use JavaScript converts hyperlinks in specified areas of web pages into URLs converts hyperlinks in specified areas of web pages into URLs converts hyperlinks in specified areas of web pages into URLs to convert hyperlinks in specified areas of web pages into URLs. Let’s take a look at the specific content.
Without further ado, let’s look directly at the example below
The code is as follows
DropHyperLink.css
.dropArea {
margin-top:8px;
margin-bottom:8px;
width:320px;
height:64px;
background-color:#fff2a7;
border: 1px solid #ff6a00;
}
.longTextBox{
width:80%;
}DropHyperLink.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" href="DropHyperLink.css" />
<script type="text/javascript">
function load() {
var droparea = document.getElementById('LinkDropArea');
droparea.addEventListener('dragover', onDragOver, false);
droparea.addEventListener('drop', onDrop, false);
}
function onDragOver(event) { //event.stopPropagation();
event.preventDefault();
event.dataTransfer.dropEffect = 'link';
}
function onDrop(event) {
var url = event.dataTransfer.getData("text");
var textBox = document.getElementById('OutputTextBox');
textBox.value = url;
}
</script>
</head>
<body onload="load();">
<div id="LinkDropArea" class="dropArea">把超链接拖到这里</div>
<input id="OutputTextBox" class="longTextBox" type="text"/>
</body>
</html>Description:
You can open the link of the web browser in the div box with ID = LinkDropArea. To accept a drop, handle the dragode event on the frame's element. During event handling, preventDefault() is called and prevents operations that do not receive a default drag. Also set it to dataTransfer.dropEffect. The drop event handler also calls the dataTransfer.getData("text") method to get the element's text data. In the case of links, the URL of the link is stored in the text data of the stored element. The string of the obtained URL will be displayed in the text box at the bottom of the screen.
Run results
Then prepare another web browser window, drag the hyperlink in the page displayed on the web browser, and Drop it in the drop area on the page.
For example, if you drag "Front-end Development", the result will be as shown below
The above is the detailed content of JavaScript converts hyperlinks in specified areas of web pages into URLs. For more information, please follow other related articles on the PHP Chinese website!