通过 JS 访问用户输入 - Javascript

在 Web 开发中，用户输入是非常重要的一种数据来源。在 Javascript 中，可以通过不同的方式来访问用户输入，如下所示：

使用 HTML 表单

HTML 表单是最常用的用户输入方式。可以通过 JavaScript 获取表单中输入的数据，代码如下：

const form = document.querySelector('form');

form.addEventListener('submit', (event) => {
  event.preventDefault();
  
  const input = form.querySelector('input[type="text"]');
  const inputValue = input.value;
  
  console.log('User input', inputValue);
});

在上面的例子中，我们获取了一个表单元素，并且添加了一个事件监听器，当表单被提交时，阻止了默认行为并获取了表单中输入框的值。

使用 Window.prompt

Window.prompt 函数可以在弹出窗口中获取用户输入的文本。代码如下：

const result = window.prompt('Please enter your name');

if (result !== null) {
  console.log('User input', result);
} else {
  console.log('User cancelled the input');
}

在上面的例子中，我们调用了 Window.prompt 函数，弹出一个窗口并且等待用户输入。如果用户输入了文本并且点击了“OK”按钮，我们就可以获取输入的内容。

使用 Window.confirm

Window.confirm 函数可以在弹出窗口中获取用户输入的二选一结果。代码如下：

const result = window.confirm('Do you want to proceed?');

if (result) {
  console.log('User clicked the OK button');
} else {
  console.log('User clicked the Cancel button');
}

在上面的例子中，我们调用了 Window.confirm 函数，弹出一个窗口并且等待用户点击“OK”或者“Cancel”按钮。根据用户的选择，我们可以做出相应的操作。

使用 Window.open 和 Window.postMessage

Window.open 函数可以在新的浏览器窗口中打开一个页面，而 Window.postMessage 函数可以在不同的窗口间传递数据。结合使用，可以实现在两个不同的页面间进行数据交互。代码如下：

// 在前一个页面
const otherWindow = window.open('https://www.example.com');

// 等待页面完全加载
otherWindow.addEventListener('load', () => {
  // 发送消息到另一个窗口
  otherWindow.postMessage('hello world', 'https://www.example.com');
});

// 在后一个页面
window.addEventListener('message', (event) => {
  if (event.origin !== 'https://www.example.com') {
    return;
  }

  console.log('Received message', event.data);
});

在上面的例子中，我们首先在前一个页面中打开了一个新的窗口，然后等待这个窗口加载完成。之后，我们使用 Window.postMessage 函数向另一个窗口发送了一条消息，并且指定了接收方的域名。在后一个窗口中，我们添加了一个 message 事件监听器，可以接受从前一个页面发送过来的消息，并且输出到控制台。

使用 Ajax 请求

通过 Ajax 请求可以实现在不跳转页面的情况下获取用户输入。代码如下：

const xhr = new XMLHttpRequest();

xhr.addEventListener('readystatechange', () => {
  if (xhr.readyState === XMLHttpRequest.DONE) {
    console.log('User input', xhr.responseText);
  }
});

xhr.open('GET', 'https://www.example.com/user-input');
xhr.send();

在上面的例子中，我们使用 XMLHttpRequest 对象发送了一个 GET 请求到指定的 URL，等待响应返回。当请求完成时，我们就可以获取用户输入的内容。

结论

通过上述的方式，我们可以访问用户输入的各种方式，实现不同的功能。对于不同的场景，我们可以选择不同的方法来获取用户输入。