How to use javascript to pop up the input box

In web development, pop-up input boxes are one of the very common requirements. In JavaScript, the pop-up input box can be implemented by using the built-in prompt method of the window object.

The prompt() method is one of the built-in methods of the JavaScript window object, which is used to pop up a dialog box with an input box in the browser. This method can receive two parameters, the first parameter is a prompt string, used to prompt the user to enter information; the second parameter is an optional default value, used to display a default value in the input box.

The following is a basic example of using the prompt() method to pop up an input box:

var input = prompt("请输入姓名", "张三");

The above code will pop up a dialog box with an input box on the page, where the default value of the input box is "Zhang San", and the prompt string is "Please enter your name".

When the user enters information in the input box and clicks the "OK" button in the dialog box, the pop-up box will close and the value entered by the user will be used as the return value of the method. If the user clicks the "Cancel" button in the dialog box, the method returns null.

if (input == null) {
  alert("你取消了输入");
} else {
  alert("你输入的是：" + input);
}

After the input box is closed, the above code will pop up different prompt boxes according to the user's operations.

It should be noted that the prompt() method can only be used for simple user input. In actual web development, we usually need to use more flexible input boxes to support more business needs. . At this time, we need to use some JavaScript libraries or frameworks to implement these functions.

For example, using the dialog component in the jQuery class library, we can pop up various types of dialog boxes very conveniently, and also support custom skins and animation effects.

The following is a sample code based on the jQuery dialog component to implement the input box:

$("#inputDialog").dialog({
  autoOpen: false,      // 是否自动弹出对话框
  resizable: false,     // 是否可缩放
  title: "请输入姓名",  // 标题
  modal: true,          // 是否模态对话框
  buttons: {            // 按钮
    确定: function() {
      var input = $("#inputText").val();
      $(this).dialog("close");
      alert("你输入的是：" + input);
    },
    取消: function() {
      $(this).dialog("close");
    }
  }
});

$("#showInputDialog").click(function() {
  $("#inputDialog").dialog("open");
});

In the above code, we first select the element where the input box is located through the jQuery selector and call the dialog() method to initialize a dialog box. Among them, the autoOpen parameter indicates whether the dialog box will pop up automatically, resizable indicates whether the dialog box is scalable, modal indicates whether it is a modal dialog box, and buttons indicates the buttons in the dialog box.

Next, we add a button to the page and trigger the pop-up of the dialog box through the click event.

At this time, when the user clicks the "OK" button in the dialog box, we can obtain the value in the input box through the val() method, and pop up a prompt box to display the content entered by the user.

Through the above code, we can easily pop up the input box. Compared with the prompt() method, this method is more flexible and can better meet various business needs.

The above is the detailed content of How to use javascript to pop up the input box. For more information, please follow other related articles on the PHP Chinese website!