Как сделать, чтобы oninput () запускался только при вводе китайских иероглифов, а не клавиш IME? - PullRequest
Новая
       28

Как сделать, чтобы oninput () запускался только при вводе китайских иероглифов, а не клавиш IME?

0 голосов
/ 22 декабря 2018

У меня есть базовый <input type="text" oninput="funct()"></input>.

Однако, когда я печатаю по-китайски, oninput также запускается входами IME, а не только получающимися символами.Например, когда я набираю «我們» в своем Pinyin IME, и моя функция funct() отображает console.log(WHAT_I_TYPED), консоль читает:

  • w
  • wo
  • wom
  • wome
  • women
  • 我們

Я хочу, чтобы он только читал "我們".Однако я не хочу изменять текст в функции, поскольку существует слишком много китайских IME, чтобы это было возможно.

1 Ответ

0 голосов
/ 22 декабря 2018

Скажем, ваша oninput функция выглядит следующим образом (очень простой пример): 

function onInputHandler(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;
}

И мы можем внедрить это в наш обработчик 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 в onInputHandler: 

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;
}

Теперь мы можем реализовать это в нашей функции следующим образом: 

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 onInputHandler(value) {
    if (chineseChar(value)) {
        console.log(value);
    }
}

Примечание: я знаю, что регулярное выражение не соответствует всем китайским символам, но этот ответ говорит вам, почему, и вы можете найти большинство других символов unicodes, прочитав ответы и перейдя по ссылкам в этой теме .

Надеюсь, это поможет!

...