使用 javascript 在没有提交按钮的情况下显示输入值到另一个页面

Question

我正在尝试将输入值的结果显示到另一个页面。但是这个输入没有提交按钮。

因此，我使用 keyup 来存储输入数据。

我有 2 页，index1.php 和 index2.php

index1.php:

<form>
    <input type="text" name="nameValidation" id="nameValidation" placeholder="Name">
    </form>

    <div id="display"></div>
    <script>
        $(function() {
            $('#nameValidation').keyup(function() {
                var nameValisession = $('#display').text($(this).val());
                sessionStorage.setItem("nameValiSession", nameValisession);
            }); 
        }); 
    </script>

所以，我在这里做的是使用 keyup 函数获取最新结果并将其存储为变量。然后，我将该变量分配给 sessionStorage.

index2.php:

    <div id="display"></div>
    <script>
    var nameValisession = sessionStorage.getItem("nameValiSession");
    document.getElementById("display").innerHTML = nameValisession;
    </script>

在这里，我只是想检索变量的值 nameValisession

但是，这对我不起作用。如何将输入值从 index1.php 发送到 index2.php？

在 tutorial website (example 1) 中，当我尝试他们的代码时，它非常适合我。

Javascript in Page 1:
var favoritemovie = "Shrek";
sessionStorage.setItem("favoriteMovie", favoritemovie);

Javascript in Page 2:
var favoritemovie = sessionStorage.getItem("favoriteMovie");
console.log(favoritemovie);

那么，有人可以为我指出正确的方向来解决问题吗？

Answer 1

问题是因为 nameValisession 将保存一个 jQuery 对象，因为这是从 text() 返回的内容，而不是实际的文本值本身，并且您不能将对象放入 localStorage .要解决此问题，请将变量声明和文本更新步骤分开。

我还建议使用 input 事件而不是 keyup，因为它还捕获通过鼠标添加的内容：

$(function() {
  $('#nameValidation').on('input', function() {
    var nameValisession = $(this).val();
    $('#display').text(nameValisession);
    sessionStorage.setItem("nameValiSession", nameValisession);
  }); 
});

使用 javascript 在没有提交按钮的情况下显示输入值到另一个页面

Displaying input value without a submit button to another page using javascript

javascript

jquery

keyup