Post
Ask Question

Prompt Box in TypeScript

Introduction

 
A TypeScript promt window ("prompt box") is used to obtain a value from the user. You can use this to prompt a user for their password before continuing with a secure action.
 
A Prompt Box also has "Ok" and "Cancel" buttons. If the user clicks on the "Ok" button the window method prompt() will return the value from the textbox entered by the user. If the user clicks on the "Cancel" button then the window method prompt() returns null.
 
The TypeScript Prompt Box takes two parameters. The first parameter is the message you want the user to read describing the value they are to supply, and the second parameter is an optional default value that will be pre-filled into the text field of the prompt box.
 
The following example shows how to use and show a prompt box in TypeScript.
 
Step 1
 
Open Visual Studio 2012 and click "File" -> "New" -> "Project...". A window is opened. In this window, click "HTML Application for TypeScript" under Visual C#.
 
Give the name of your application as "Promt_Box" and then click "Ok".
 
Step 2
 
After this session the project has been created; A new window is opened on the right side. This window is called the Solution Explorer. The Solution Explorer contains the ts file, js file, and CSS files.
 

Coding

 
PromptBox.ts
  1. class Prompt_Box  
  2. {  
  3.  show()  
  4.  {  
  5.   var promptValue = prompt('Enter any value in below', '');  
  6.   if (promptValue != null) {  
  7.    document.getElementById("Status").innerHTML = "Prompt Box value ->" + promptValue;  
  8.   } else  
  9.   {  
  10.    document.getElementById("Status").innerText = "You cancel Prompt Box";  
  11.   }  
  12.  }  
  13. }  
  14. window.onload = () =>  
  15.  {  
  16.   var bttn = < HTMLButtonElement > document.getElementById("Button1");  
  17.   bttn.onclick = function()  
  18.   {  
  19.    var obj = new Prompt_Box();  
  20.    obj.show();  
  21.   }  
  22.  };  
PromptBox_Demo.htm
  1. <!DOCTYPEhtml>  
  2. <htmllang="en"  
  3.     xmlns="http://www.w3.org/1999/xhtml">  
  4.     <head>  
  5.         <metacharset="utf-8"/>  
  6.         <title>TypeScript HTML App</title>  
  7.         <linkrel="stylesheet"href="app.css"type="text/css"/>  
  8.         <scriptsrc="app.js">  
  9.         </script>  
  10.     </head>  
  11.     <body>  
  12.         <h2>Prompt Box in TypeScript</h2>  
  13.         <divstyle="color:#0026ff"id="Status"/>  
  14.         <inputid="Button1"type="button"value="Click For Enter Value"/>  
  15.     </body>  
  16. </html>  
app.js
  1. var Prompt_Box = (function() {  
  2.  function Prompt_Box() {}  
  3.  Prompt_Box.prototype.show = function() {  
  4.   var promptValue = prompt('Enter any value in below', '');  
  5.   if (promptValue != null) {  
  6.    document.getElementById("Status").innerHTML = "Prompt Box value ->" + promptValue;  
  7.   } else {  
  8.    document.getElementById("Status").innerText = "You cancel Prompt Box";  
  9.   }  
  10.  };  
  11.  return Prompt_Box;  
  12. })();  
  13. window.onload = function() {  
  14.  var bttn = document.getElementById("Button1");  
  15.  bttn.onclick = function() {  
  16.   var obj = new Prompt_Box();  
  17.   obj.show();  
  18.  };  
  19. };  
  20. //@ sourceMappingURL=app.js.map  
Output 1
 
Click on the button:
 
first-image.jpg
 
Output 2
 
Enter the value, then click on "Ok":
 
enter-value-in-prompt-box.jpg
 
show-prompt-box-value.jpg
 
Output 3
 
If the prompt window is canceled:
 
cancel-prompt-box.jpg
 
Referenced By
http://www.typescriptlang.org/


Similar Articles