Javascript抓取用户输入字段并将其用作变量。

14 浏览
0 Comments

Javascript抓取用户输入字段并将其用作变量。

我有一个带有id userName的用户输入，并且我正在尝试在用户完成在文本框中输入文本后使用$(\"#userName\").val()来获取用户输入的文本，并将其存储在一个变量（一个目录路径）中。然而，我得到$(\"#userName\").val()的undefined。我认为undefined是发生的原因是文本字段在运行时尚未准备好，所以我尝试设置一个回调函数来在我的目录路径中使用，但是当我执行console.log(\"这是字段名称：\" + getUserName());时仍然得到undefined。下面是我的回调函数：\n

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

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

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

\n然而，当我这样做时，我仍然得到undefined。我在这里做错了吗？\n更新：\n

name.html:
    
Name:

0

3 答案

0 Comments

Javascript抓取用户输入字段并将其用作变量的问题是出于以下原因：

1. 需要将用户输入的数据传递给其他部分的JavaScript应用程序。

2. 需要将用户输入的数据与其他数据进行操作，以生成所需的结果。

为了解决这个问题，可以采取以下步骤：

1. 绑定自定义事件（例如：refreshAutoComplete）到目标元素上。

2. 当用户在输入文本中输入信息时，触发该事件。

3. 在触发执行过程中传递输入的数据。

4. 获取该数据并执行逻辑操作。

通过这种方法，可以将责任分开，使其更加可重复使用和可维护。

以下是实现这种方法的示例代码：

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





  
Name:

通过以上代码，当用户在输入框中输入信息时，会触发`input`事件。然后，通过触发`refreshAutoComplete`事件，并传递输入的数据，将用户输入的数据传递给其他部分的JavaScript应用程序。在`refreshAutoComplete`事件的处理程序中，可以根据用户输入的数据执行逻辑操作，例如生成文件路径。最后，将结果显示在指定的元素中。

这种方法的优点是，将用户输入事件和数据操作分开，使逻辑更加清晰，并且可以在JavaScript应用程序的其他部分重复使用。同时，这种方法也提供了灵活性，可以根据实际需求对用户输入的数据进行操作。

0
0 Comments

问题的出现原因可能是因为在执行代码时，DOM尚未准备好，或者没有等待特定的事件发生。在处理用户输入的方式取决于你想要如何处理用户输入，解决方法应该是实现以下代码：

var filePath;
function updateFilePath() {
    filePath = 'myPath/' + this.value + '.txt';
    console.log('The file path has changed to: %s', filePath);
}
// 当DOM准备好使用时，执行代码
$(function() {
    // 在userName输入值更改时添加事件处理程序
    $('#userName').on('change', updateFilePath);
})

正如评论中所说，你可以使用其他事件，如'keyup'、'blur'，或者根据需要选择适合你的事件，但可能'change'是你意图中最好的选择。

在我的页面上没有按钮，只有一个带有自动补全的文本字段。一旦用户输入了前几个字母，就会有一个自动补全来显示他们的名字，然后他们只需点击建议的名字。是否有其他方法可以在没有按钮的情况下完成这个功能？

是的，我已经修改了示例以匹配你缺失的HTML代码。

非常感谢你的帮助！真的为我解决了问题 🙂

很高兴能帮到你 🙂

0
0 Comments

原因：代码存在以下问题：

1. 在函数内部设置了keyup事件监听器，所以除非调用该函数，否则keyup事件处理程序将不起作用，因为事件监听器还没有被设置。

2. 忽略了事件处理程序的执行是异步操作且不返回任何内容的事实。

3. 即使上述问题是可能的，getUserName函数中仍然没有return语句。

解决方法：尝试使用以下事件，并在事件处理程序中构建路径：

1. blur事件，在input失去焦点时触发。

2. change事件，在input的值发生更改时触发。

代码示例：

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

注意：.on("change")更合适，这样就不会在用户通过Tab键或点击时每次聚焦和失焦字段时都触发事件。

事件处理程序回调不是异步操作，它只是在自己的作用域中运行。所有事件处理程序都是同步触发并按绑定顺序执行。

以上为我对原文内容的整理和解释。

0