| |
|
document title of a page by JavaScript |
Title tag of the web page is one of the important tag of a html page. The keywords used inside this title tag has high relevant for search engine ranking of a site. You can read on title tag keywords at search engine friendly page here.
You can read html title tag here.
We will discuss here how to manage the title tag by using the document property in JavaScript.
The basic syntax to manage content of the title tag is here.
document.title=" this is my new title ";
You can see how the tag is changed. Now let us try one demo. Type some text here and click the button.
Now watch the title at the top left corner of this page.
You may be thinking why I should press the button? We can keep on changing the title as we type the keys. Here we will use onkeyup event handler to read the key data. Here is the demo.
Ok now the source code for the above demos , first the top one ( by pressing the button )
<html>
<head>
<title></title>
<script type="text/javascript">
function change_title(){
document.title=document.getElementById("t1").value;
}
</script>
</head>
<body>
<form name=f1 method=post>
<input type=text name=t1 id="t1">
<input type=button onClick='change_title()'; value='Change Title'>
</form>
</body>
</html>
Now the code for second example ( without the submit button by using onkeyup event handler)
<html>
<head>
<title>Original title ends</title>
<script type="text/javascript">
function change_title(keyEvent){
//alert(keyEvent);
keyEvent = (keyEvent) ? keyEvent: window.event;
input = (keyEvent.target) ? keyEvent.target :
keyEvent.srcElement;
if(keyEvent.type=="keyup"){
if(input.value){
document.title=document.getElementById("t1").value;
}
}
}
</script>
</head>
<body>
<form name=f1 method=post>
<input type=text name=t1 id="t1" onkeyup='change_title(event)';>
</form>
</body>
</html>
|
|
|
| Document Object |
|
|
|
| Subscribe |
|
Submit your email address and receive
article and product notifications. Your email is safe with us.
|
|
|
|