苗条的输入字段文本长度检查

Question

正在学习 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

Answer 1

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

Answer 2

我想你的问题是记录的 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 }

Answer 3

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

运行 on:keyup（比必要更频繁地触发）
通过event.target.value.length

不会监听文本字段上的事件，而只是 'listen' 改变长度，然后运行使用此语法的检查函数

$: 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>

不知道有没有这种'listening'/'quick subscription'的名字。根据，与','和'&&'的联系甚至可以合并。

苗条的输入字段文本长度检查

Svelte input field text length check

svelte