在您键入时附加带有转换字符的输入字段,JQUERY

Posted

技术标签:

【中文标题】在您键入时附加带有转换字符的输入字段,JQUERY【英文标题】:Append input field with converted characters as you type, JQUERY 【发布时间】:2016-04-26 12:34:10 【问题描述】:

这一定很简单,但由于我糟糕的 jQuery 技能,我真的被卡住了,无法解决。

目标是在用户在输入字段中键入时将拉丁字符转换为大写希腊字符。

似乎我已经很接近了,但我的问题是我将我的拉丁语和希腊语字符放在一起以进行单个 keyup 事件。这是我的小提琴https://jsfiddle.net/harman79/dymtufy8/

html

<input type="search" id="search-id">

JQUERY:

$("#search-id").bind('keyup', function(e) 
  var charMap = 
    65: 913,
    66: 914,
    67: 936,
    68: 916,
    69: 917,
    70: 934,
    71: 915,
    72: 919,
    73: 921,
    74: 926,
    75: 922,
    76: 923,
    77: 924,
    78: 925,
    79: 927,
    80: 928,
    81: 931,
    82: 929,
    83: 931,
    84: 932,
    85: 920,
    86: 937,
    87: 937,
    88: 935,
    89: 933,
    90: 918
  ;

  $.each(charMap, function(index, value) 
    if (index == e.which) 
      $("#search-id").val(function(index, val) 
        return val + String.fromCharCode(value);
      );
    
  );
);

如果我将return val + String.fromCharCode(value); 替换为return String.fromCharCode(value);,我只会得到转换后的字符,但每个新的keyup 都会替换以前的输入内容。

任何 hep 将不胜感激! 哈利

【问题讨论】:

【参考方案1】:

你可以试试这个:

$("#search-id").bind('keyup', function(e) 
  var charMap = 
    65: 913,
    66: 914,
    67: 936,
    68: 916,
    69: 917,
    70: 934,
    71: 915,
    72: 919,
    73: 921,
    74: 926,
    75: 922,
    76: 923,
    77: 924,
    78: 925,
    79: 927,
    80: 928,
    81: 931,
    82: 929,
    83: 931,
    84: 932,
    85: 920,
    86: 937,
    87: 937,
    88: 935,
    89: 933,
    90: 918
  ;

  $.each(charMap, function(index, value) 
    if (index == e.which) 
      $("#search-id").val(function(index, val) 
        // Remove last character and replace with new value
        return val.substring(0, val.length - 1) + String.fromCharCode(value);
      );
    
  );
);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="search" id="search-id">

【讨论】:

非常感谢伙计!!!让我脱臼了。看来我必须用 keydown 替换我的 keyup 以获得更快的转换响应,但现在所有逻辑都在那里.. 是的,keydown 将是您想要的最佳选择。

以上是关于在您键入时附加带有转换字符的输入字段,JQUERY的主要内容,如果未能解决你的问题,请参考以下文章

将文本输入到另一个输入字段时清除输入字段

jQuery Autocomplete - 在选择之前不要填​​充文本输入(鼠标或输入)

显示用户在文本框中键入指定字符时的建议

实现 jquery UI 自动完成以在您键入“@”时显示建议

如何在键入时使 UITextField 宽度调整为文本?

使 html 文本输入字段在我键入时增长?