在文本框中更改输入时调用函数？ [关闭]答案

【问题标题】：Call function when input is changed on text box? [closed]在文本框中更改输入时调用函数？ [关闭]
【发布时间】：2019-01-31 21:38:00
【问题描述】：

我正在尝试创建一个按钮，当用户名和密码字段都通过某种输入（IE；用户名或密码文本框都不是空的）输入时改变颜色

有没有办法在 NativeScript 中更改文本框的输入时触发函数？我曾在 NativeScript slack 以及其他网站上询问过，但我似乎从未得到回复。

我认为这是一个相对简单的请求，尤其是当我使用 vanilla JS 时。肯定比使用 Angular 或 Vue 之类的框架更简单吧？

我不想使用框架，我正在寻找一种使用普通 JS 的方法。我试过什么？我试过onChange=""、textChange=""、change=""，但似乎都没有。

【问题讨论】：

可能是like this，但很难说，因为你没有任何示例代码，所以不清楚你在使用什么。

标签： javascript nativescript

【解决方案1】：

如果您使用没有任何框架的纯 JavaScript / TypeScript，那么您必须在 loaded 事件之后添加您的 textChange 侦听器。

XML

<TextField loaded="onTextFieldLoaded"></TextField>

function onTextFieldLoaded(args) {
  const textField = args.object;
  textField.off("loaded");
  textField.on("textChange", onTextChange);
}

function onTextChange(args) {
  console.log("Changed: " + args.value);
}

Here is a Playground Sample.

【讨论】：

我在我的应用程序中实现了您的代码并控制了日志，尽管文本框似乎取消了我输入的字符。这是我的游乐场样本：play.nativescript.org/?template=play-js&id=euJOGP

【解决方案2】：

您可以使用 onkeyup 事件来触发表单的验证。

请看下面的片段：

document.addEventListener("load", function(){
  
});

function validate(event){
  if(document.getElementById("username").value.trim()!="" && document.getElementById("password").value.trim()!=""){
    document.getElementById("btn").removeAttribute("disabled");
  }else{ 
    document.getElementById("btn").setAttribute("disabled", "disabled");
  }
}

.enable{
  
}

<div>
  <label for="username"><input type="text" id="username" name="username" onkeyup="validate(event)"/></label>
  <label for="password"><input type="password" id="password" name="password" onkeyup="validate(event)"/></label>
  <button id="btn" value="Submit" disabled>Submit</button>
</div>

【讨论】：

这个问题与HTML无关，是针对NativeScript的，你看我的问题了吗？
@LeeNelson 我认为问题在于你用JavaScript 标记了你的问题并且没有包含任何你应该拥有的示例代码，所以很容易错过你想要的东西似乎没有被广泛使用的特定框架。
它被广泛使用，足以在stackoverflow上有一个标签。 NativeScript 使用 javascript，这就是我标记它的原因。我没有包含任何示例代码，因为它不需要任何代码。
@LeeNelson 一个只有 4,000 个问题的标签，所以没有被广泛使用。你总是需要示例代码，因为没有它，你甚至不清楚你在做什么。另外，这不是我的答案。
@LeeNelson 下次可能会将其添加到主题行中。

【解决方案3】：

编辑了我的整个答案，因为我最初用 Javascript 给了你一个完整的演示，哈哈。也许有很多声望点的人应该做一个 Nativescript 标签。

不管怎样，你试过这样吗？

<TextField hint="Enter text" text="" (textChange)="myFunction($event)"></TextField>

或

var el = page.getViewById("myEl");
el.on("textChange", myFunction);

function myFunction() {
   console.log('woo');
}

【讨论】：