Javascript抓取用户输入字段并在变量中使用它

Question

我有一个 ID 为 userName 的用户输入，并且在用户完成在文本框中输入文本然后将其存储在变量（目录路径）中后，我试图使用 $("#userName").val() 获取用户输入文本，但是，我对$("#userName").val() 没有定义。我认为未定义的发生是因为文本字段在运行时尚未准备好，所以我试图设置一个回调函数以在我的目录路径中使用，但是当我在下面执行console.log("This is the field name: " + getUserName()); 时仍然未定义是我的回调函数：

function getUserName(){
    $("#userName").keyup(function(){
        console.log(this.value);
        return this.value;
    });
}

我在这里尝试在我的目录变量中使用它（变量filePath 在函数getUserName()之外）：

var filePath = "/my/path/to/the/file/" + getUserName() + ".txt";

但是，当我这样做时，我仍然不确定。我在这里做错了吗？

更新：

name.html:
<div class="subArea" id="pvDiv">
    <p id="nameP">Name:
        <input id="userName" class="userInput" type="text" placeholder="Enter Name">
    </p>
</div>

Answer 1

由于很多原因，您的代码没有意义，其中大部分可以在您问题下的 cmets 中找到。简而言之：

1234563 p>

• 您忽略了一个事实，即事件处理程序的执行是异步操作并且不返回任何内容。

• 即使上述情况可行，您在getUserName 中仍然没有return 语句。

尝试使用以下事件之一并在事件处理程序内部构造路径：

• blur 事件，当 input 失去焦点时触发。
• change 事件，当input 的值发生更改时触发。

代码：

$("#userName").on("change", function() {
   var filePath = "/my/path/to/the/file/" + this.value + ".txt";
   console.log("The new path is '" + filepath + "'.");
});

Answer 2

直接使用$("#userName").val()获取输入值的问题可能是由于执行该代码时DOM尚未准备好，或者您没有等待某个事件发生，看看

call a function after complete page load

并且输入上的 Keyup 事件处理程序未正确实现，因为它不会在您的函数中返回任何内容。

然后根据您希望如何处理用户输入是您需要实施的解决方案，这样的事情应该可以工作。

var filePath;

function updateFilePath() {
    filePath = 'myPath/' + this.value + '.txt';
    console.log('The file path has changed to: %s', filePath);
}

// When the dom Is ready to be used, you execute your code.
$(function() {
    // Add an event handler when userName input value change 
    $('#userName').on('change', updateFilePath);
})

正如 cmets 中所说，您可以使用其他事件，例如“keyup”、“blur”或任何更适合您需求的事件，但“change”可能是您的最佳选择。

Answer 3

• 您可以将自定义事件（即：refreshAutoComplete）绑定到您的目标元素。
• 当用户在您的输入文本中输入信息时触发该事件。
• 在整个触发器执行过程中传递输入的数据

$('#autocompleteResult').trigger('refreshAutoComplete', [{userData: this.value}]);

• 获取该数据并执行您的逻辑

var filePath = "/my/path/to/the/file/" + data.userData + ".txt"; $(this).html(filePath);

这种方法将职责分开：

1. 用户输入事件。
2. 输入的用户数据的操作。

现在您的 filePath 逻辑已分离，可以从您的 JS 应用程序的其他部分重复使用。

$(document).on('input', '#userName', function() {
  $('#autocompleteResult').trigger('refreshAutoComplete', [{userData: this.value}]);
});

$(document).on('refreshAutoComplete', '#autocompleteResult', function(e, data) {
  var filePath = "/my/path/to/the/file/" + data.userData + ".txt";
  $(this).html(filePath);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="subArea" id="pvDiv">
  <p id="nameP">Name:
    <input id="userName" class="userInput" type="text" placeholder="Enter Name">
  </p>
  <p id='autocompleteResult'>
  </p>
</div>

Answer 4

您创建的函数只是将 keyup 事件绑定到文本框。该函数 getUsername 在您输入时被调用。

要获取它的值，您可以使用 $("#userName").val() 所以你可以使用

设置文件路径

var filePath = "/my/path/to/the/file/" +  $("#userName").val() + ".txt";

如果只需要在userName字段存在的情况下进行，可以这样做：

if( $("#userName").length > 0)
    filePath = "/my/path/to/the/file/" +  $("#userName").val() + ".txt";

希望这会有所帮助。