Question

我有基本的<input type="text" oninput="funct()"></input>。

但是，当我输入中文时，oninput也会由IME输入触发，而不仅仅是产生的字符。例如，当我用拼音输入法输入“我们”，而我的函数funct()显示console.log(WHAT_I_TYPED)时，控制台显示为：

w
我
wom
wome
妇女
我们

我只想读“我们”。但是，我不想修改函数中的文本，因为太多的中文IME使其无法实现。

Answer 1

假设您的oninput函数如下所示（一个非常简单的示例）：

function onInputHandler(value) {
    console.log(value);
}

现在，我发现了this answer，并且我对函数进行了一些修改以处理句子/多个字母：

function letter(phrase) {
    var output = false;
    var chars = phrase.split("");
    chars.forEach(c => {if (!c.toUpperCase() != c.toLowerCase()) output = true});
    return output;
}

我们可以像这样将其实现到我们的oninput处理程序中：

function onInputHander(value) {
    if (!letter(value) {
        console.log(value);
    }
}

因此，只要它不是字母，它就会打印出该值。这是一个演示：

function letter(phrase) {
    var output = false;
    var chars = phrase.split("");
    chars.forEach(c => {if (!c.toUpperCase() != c.toLowerCase()) output = true});
    return output;
}

function onInputHandler(value) {
    if (!letter(value)) {
        console.log(value);
    }
}

<input type="text" oninput="onInputHandler(this.value)">

但是您会在上面的片段中注意到，它还会打印出空格-试试吧！我在if的{{1}}语句中添加了另一个条件：

onInputHandler

现在，这将不允许任何大小写不同的字符（大多数字母，包括拉丁（英语），希腊和西里尔字母（俄语）。

但是，如果您想换一种方式，并检查字符串中的每个字符是否都是汉字，则可以查看this question及其答案。这是您可以为汉字构造的正则表达式的示例（虽然不完美，但它涵盖了大多数字符）：

if (!isLetter(value) && value.trim() != "") {
    console.log(value);
}

这是一个检查字符串中所有字符是否与该正则表达式匹配的函数：

const chineseCharacterRegex = /[\u4e00-\u9fff]|[\u3400-\u4dbf]|[\u{20000}-\u{2a6df}]|[\u{2a700}-\u{2b73f}]|[\u{2b740}-\u{2b81f}]|[\u{2b820}-\u{2ceaf}]|[\uf900-\ufaff]|[\u3300-\u33ff]|[\ufe30-\ufe4f]|[\uf900-\ufaff]|[\u{2f800}-\u{2fa1f}]/u;

现在我们可以像这样在我们的函数中实现它：

function chineseChar(phrase) {
    var output = true;
    var chars = phrase.split("");
    chars.forEach(c => {if (!c.match(chineseCharacterRegex)) output = false);
    return output;
}

注意：我知道正则表达式并不匹配所有的汉字，但是this answer告诉您原因，您可以通过阅读答案并点击{{ 3}}。

希望这会有所帮助！

仅当输入汉字而不输入IME击键时，如何才能使oninput（）触发？

1 个答案:

注意：我知道正则表达式并不匹配所有的汉字，但是this answer告诉您原因，您可以通过阅读答案并点击{{ 3}}。