时间戳

首页 > 解决方案 > 在输入输入后如何从字符串中提取最后一个字符？

javascript - 在输入输入后如何从字符串中提取最后一个字符？

问题描述

我在 laravel 和 php 中有一个项目，在一个视图中我有一个输入，我写一个10 个字符的字符串，其他输入的最大值为1。当我在第一个输入中写一个数字时，另一个输入必须是第一个输入的最后一个字符。

例如：

<form action="{{route('admin.store', $admin)}}" method="POST">

  <input type="text" maxlength="10" minlength="9" id="number">

  <input type="text" maxlength="1" id="last">

  <input type="submit" value="APPLY CHANGES" onclick="return FillTextBox()">
</form>

如果我写2341325432，那么第二个输入的内容必须是值2，因为2是第一个输入的最后一个字符。

我试过这个，但它没有完全工作。

因为在我的控制器中的 laravel dd($request->last) 返回一个空值。

<script type="text/javascript">
    function FillTextBox(){
        var string = document.getElementById('number').value;

        document.getElementById('last').value = string.charAt(string.length-1);
    }
</script>

为什么我的功能不起作用？我尝试使用按钮捕获事件，或者我可能会在第一个输入中写入值后尝试捕获。

标签： javascriptphplaravel

解决方案

如果您将 JavaScript 设置为在加载时执行或由于加载顺序而在DOM 准备就绪时执行，您的代码将无法工作。如果您将其交换到底部，<head>或者<body>它将按预期工作：

function FillTextBox() {
  var string = document.getElementById('number').value;
  document.getElementById('last').value = string.charAt(string.length - 1);
}
<form action="new_tab.php" target="_blank" method="POST">
  <input type="text" maxlength="10" minlength="9" id="number">
  <input type="text" readonly="read" maxlength="1" id="last">
  <input type="submit" value="APPLY CHANGES" onclick="return FillTextBox()">
</form>

为了防止这种情况，您应该通过添加事件侦听器而不是使用属性来真正使用不显眼的 JavaScript：onclick

document.getElementById('submit').addEventListener('click', function() {
  var string = document.getElementById('number').value;
  document.getElementById('last').value = string.charAt(string.length - 1);
});
<form action="new_tab.php" target="_blank" rel="noopener noreferrer" method="POST">
  <input type="text" maxlength="10" minlength="9" id="number">
  <input type="text" readonly="read" maxlength="1" id="last">
  <input id="submit" type="submit" value="APPLY CHANGES">
</form>

除此之外，当您使用 时target=_"blank"，您还需要添加rel="noopener noreferrer"到表单中以防止“Target Blank”漏洞。我已将此添加到上面的示例中。

推荐阅读