Question

我正在尝试使用aurelia值转换器来解析用户输入的值，方法是删除在输入字段中输入的所有非法字符并显示已解析的文本。但是在极少数情况下，我无法向用户显示已解析的文本，而是显示带有非法字符的输入文本。事实上，输入的文本实际上是经过解析的，因此我想知道可以更改哪些内容以显示经过解析的文本。

我尝试包含两个replace regex语句，但似乎没有什么可以纠正此问题。

值转换器clean-string.ts：

 export class CleanStringValueConverter {
   fromView(val) {
     val = val
           .replace(/([|!/&*:;$%@#`'_"^<>()+-.,\\])+/g, "")
           .replace(/([^a-z 0-9]+)/gi, "")
           .trim();
     console.log(val);
     return val;
   }
 }

app.html：

 <template>
      <require from="./clean-string"></require>

      <h3>Enter text with illegal charaters</h3>
      <input type="text" value.bind="dirtyString | cleanString" />
 </template>

app.ts：

  export class DCString{
    dirtyString: string;
  }

例如：我输入“ random ####” 我希望在输入最后一个字符时在输入字段中显示“随机”，因为我正在解析非法字符。

但是我只是在文本字段上看到'random ####'，除非我输入一个额外的字符然后触发解析。

有没有办法解决此问题？我需要进行哪些更改才能使其正常工作？预先感谢您的输入！

这是正在发生的事情的摘要：

从控制台上，我们可以看到实际上已根据我的需要对输入的文本进行了解析，但是即使输入的值是绑定的，也不会在输入字段中显示为已解析的文本。

以下是上述代码的“ codesandbox”链接： sandbox link

更新：

我使用keypress事件尝试了评论中的一项建议。除非您粘贴带有所有非法字符的字符串，否则它的工作原理就像一种魅力。有没有办法解决这个问题？

Answer 1

我觉得这就是我想要的，并且我找到了解决方案。我必须使用值转换器，按键事件和updateTrigger绑定规则的概念来使这项工作毫无麻烦。让我知道您是否找到了更好的解决方案：）

非常感谢您到目前为止的所有投入：）

这就是我所做的：

app.html

  <template>
    <require from="./clean-string"></require>

    <h3>Enter text with illegal charaters</h3>
    <input
         type="text"
         value.bind="dirtyString | cleanString & updateTrigger:'blur'"
         keypress.delegate="keypress($event)"
    />
    <p>${dirtyString}</p>
  </template>

clean-string.ts

export class CleanStringValueConverter {
  fromView(val) {
    val = val
      .replace(/([|!/&*:;$%@#`'_"^<>()+-.,\\])+/g, "")
      .replace(/([^a-z 0-9]+)/gi, "")
      .trim();
    return val;
  }

  toView(dirtyString) {
    dirtyString = dirtyString
      .replace(/([|!/&*:;$%@#`'_"^<>()+-.,\\])+/g, "")
      .replace(/([^a-z 0-9]+)/gi, "")
      .trim();
    return dirtyString;
  }
}

app.ts

export class Color {
  dirtyString = "";

  keypress(event) {
    return /([a-z 0-9]+)/gi.test(event.key);
    // return !/[|!/&*:;$%@#`'_"^<>()+-.,\\]/.test(event.key);
  }
}

link to working code

也可以在aurelia网站上找到讨论： discussion link

在使用aurelia时，如何使用值转换器或任何其他方法来绑定和显示值绑定

1 个答案: