Question

我有一个标识为userName的用户输入，我试图在用户输入文本框中的文本然后将其存储在变量中后使用$("#userName").val()获取用户输入文本（a然而，我正在为$("#userName").val()定义未定义。我认为未定义正在发生，因为文本字段在运行时尚未就绪，所以我正在尝试设置一个回调函数以在我的目录路径中使用，但是当我做{{1}时我仍然未定义下面是我的回调函数：

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";

Answer 1

您的代码由于很多原因而没有意义，其中大多数都可以在您提问的评论中找到。简而言之：

您在函数内部设置keyup事件侦听器，因此除非调用该函数，否则keyup事件处理程序无法正常工作，因为事件侦听器赢了＆＃39; t已经设定。
您忽略了事件处理程序的执行是异步操作并且不返回任何内容的事实。
即使上述情况可行，您仍然无法在return中发表getUserName声明。

尝试使用以下事件之一并在事件处理程序中构建路径

：

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);
})

如评论中所述，您可以使用其他活动，例如＆＃39; keyup＆＃39;，＆＃39;模糊＆＃39;或者更适合你的需求，但可能会改变＆＃39;是您的最佳选择。

Answer 3

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

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

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

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

这种方法将责任分开：

用户输入事件。
操纵输入的用户数据。

现在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";

希望这有帮助。

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

4 个答案: