Svelte 输入字段文本长度检查答案

【问题标题】：Svelte input field text length checkSvelte 输入字段文本长度检查
【发布时间】：2021-10-26 19:04:24
【问题描述】：

学习 Svelte.js 库，似乎无法解决以下问题。

由于某种原因，l 的值被错误地评估，这可以在控制台中看到。

我在想，on:input 可能被错误地使用了 <textarea> 或 check() 函数构建不正确。

<script>
let t = ''
$: l=t.length
    
    function check() {
        if (l > 5) {
            console.log(l)
        }
        console.log(l)
    }
</script>

<h1>Am I a good Svelt dev?</h1>
<p>My code:</p>
<textarea on:input={check} bind:value={t} />
<p>{l} chars. {l>240?'NOPE':'I ❤️ Svelte'}.</p>

似乎我无法弄清楚 - 因此我无法进行正确的文本长度验证检查。

代码可以在网络上复制和运行： https://svelte.dev/repl/b0fd6b152bb54383beab850f0feb5e0e?version=3.44.0

【问题讨论】：

有什么问题。代码似乎工作正常，没有控制台消息。
您在此处发布的代码不是 REPL 中的代码。两者似乎都在做他们应该做的事。使用检查功能，如果长度大于 5，则始终记录长度一次和两次。您的确切目标是什么或您在哪里看到问题？

标签： svelte

【解决方案1】：

我想你的问题是记录的length 似乎不正确

a -> 0
ab -> 1
abc -> 2

这是因为on:input 在bind:

之前被评估

那么会发生什么：

长度为0，因为字符串为空
用户按下a
on:input 触发器
check 函数计算长度，但它仍然为空，因此为 0
bind: 触发并更新字符串
用户按下b
on:input 触发器
check 现在看到长度为 1，因为字符串是 a
bind: 将字符串设置为ab

如果您想检查输入事件中 current 字符串的长度，则必须从事件参数中获取它

function check(ev) {
  const length = ev.target.value.length
  // other stuff here
}

【讨论】：

【解决方案2】：

正如 voscausa 所说，REPL 中的代码似乎可以正常工作，但不包括 check() 函数。如果你使用on:keyup而不是on:input，那么l的值应该是正确的。

【讨论】：

为什么改为 on:keyup - on:input 工作正常？使用 on:keyup 触发更多事件（如按下 Shift）
这解决了问题 - on:keyup 而不是 on:input 正确评估 l。对于发布的其他人来说更准确 - 如果您复制并执行我的代码 - 并在控制台中仔细观察数字，您会看到 l 的评估不正确。
当然，我是盲人......但如果问题是“不正确的输出”而不是“在应该为 1 时记录 0”，则更难理解问题 - 精确的描述会有所帮助 :-)

【解决方案3】：

意识到问题在于 on:input 在 l 被响应更新之前触发，这是已经提到的解决方案的替代方法

run on:keyup（触发频率高于必要）
通过event.target.value.length直接在check(event)中获取长度

将不监听文本字段上的事件，而只是“监听”长度的变化，然后使用此语法运行检查函数

$: l=t.length
    
$: l && check()  // check() is run when l changes and is true

// or

$: l, check()  // check() is run every time l changes

REPL

<script>
    
let t = ''

$: l=t.length
    
// $: l, check()  // triggers every time l changes

$: l && check()  // triggers every time l changes and is true
    
function check() {
 if (l > 5) {
   console.log(l)
 }
   console.log(l)
}
    
</script>

<h1>Am I a good Svelt dev?</h1>
<p>My code:</p>
<textarea bind:value={t} />
<p>{l} chars. {l>240?'NOPE':'I ❤️ Svelte'}.</p>

我不知道这种“收听”/“快速订阅”是否有名称。根据this post 的说法，与 ',' 和 '&&' 的连接甚至可能结合在一起。

【讨论】：