如何让键盘的一个键在HTML中显示另一个字符？

Question

先说一下什么是half-space给不知道的人。例如比较以下两个注释。

می‌آیم - میآیم

您可以比较使用正常space和半space时，می和آьم之间的距离。

正如 Mihan Nijat 在他的回答中提到的那样，它有一个 HTML 代码 。通常当你使用一些键盘时，比如 standard Iranian keyboard 有一些组合键，比如 Shift+B.

现在我的问题是，是否可以在HTML文档中自己定义一个half-space而不使用上面提到的这些。因此，定义一个特定的 half-space 和我们想要的长度，例如 1 个像素。是否可以要求 HTML 自动编译一个带有我们自定义的 half-space 的字符？

Answer 1

零宽度 SPACE

零宽度 SPACE 在两个字符之间创建 space 但实际上 space 与默认 space 的宽度不同。这对于阿拉伯语和波斯语脚本非常方便。

commonly abbreviated ZWSP this character is intended for invisible word separation and for line break control; it has no width, but its presence between two characters does not prevent increased letter spacing in justification.

HTML实体（十进制）：

完整的详细信息可用 here。

如果你想按下一个键并为你创建零宽度SPACE，然后使用JavaScript逻辑。示例：如果按下 A，则执行 [this]。在逻辑中使用键码。

您需要像跟随事件添加侦听器这样的东西。

function(e) {
    if (e.keyCode == 13) {
      .... code here
    }
}

在上面的示例中，13 整数用于 enter 键。

如果您没有更改网站的权限，而您只想输入textarea或input并允许使用HTML。然后使用  代码，它将为您工作。

更新： 我刚刚检查了网站，添加零宽度 space 和 ctrl+b 并没有为我添加任何大胆的心。我复制了您发布的文本并粘贴到 word 程序中。并将所有♥替换为 space，然后复制文本并使用 past from word - icon.

粘贴到论坛上

看这张测试图：

Answer 2

从键盘获得输入后，将其替换为其他内容。参考这个：filddle

在 fiddle 中只需将 \x20 替换为您想要的任何 UTF 间距选项即可。

function transformTypedChar(charStr) {
  return charStr == "a" ? "\x20" : charStr;
}

代码：

function transformTypedChar(charStr) {
  return charStr == "a" ? "\x20" : charStr;
}

function getInputSelection(el) {
  var start = 0,
    end = 0,
    normalizedValue, range,
    textInputRange, len, endRange;

  if (typeof el.selectionStart == "number" && typeof el.selectionEnd == "number") {
    start = el.selectionStart;
    end = el.selectionEnd;
  } else {
    range = document.selection.createRange();

    if (range && range.parentElement() == el) {
      len = el.value.length;
      normalizedValue = el.value.replace(/\r\n/g, "\n");

      // Create a working TextRange that lives only in the input
      textInputRange = el.createTextRange();
      textInputRange.moveToBookmark(range.getBookmark());

      // Check if the start and end of the selection are at the very end
      // of the input, since moveStart/moveEnd doesn't return what we want
      // in those cases
      endRange = el.createTextRange();
      endRange.collapse(false);

      if (textInputRange.compareEndPoints("StartToEnd", endRange) > -1) {
        start = end = len;
      } else {
        start = -textInputRange.moveStart("character", -len);
        start += normalizedValue.slice(0, start).split("\n").length - 1;

        if (textInputRange.compareEndPoints("EndToEnd", endRange) > -1) {
          end = len;
        } else {
          end = -textInputRange.moveEnd("character", -len);
          end += normalizedValue.slice(0, end).split("\n").length - 1;
        }
      }
    }
  }

  return {
    start: start,
    end: end
  };
}

function offsetToRangeCharacterMove(el, offset) {
  return offset - (el.value.slice(0, offset).split("\r\n").length - 1);
}

function setInputSelection(el, startOffset, endOffset) {
  el.focus();
  if (typeof el.selectionStart == "number" && typeof el.selectionEnd == "number") {
    el.selectionStart = startOffset;
    el.selectionEnd = endOffset;
  } else {
    var range = el.createTextRange();
    var startCharMove = offsetToRangeCharacterMove(el, startOffset);
    range.collapse(true);
    if (startOffset == endOffset) {
      range.move("character", startCharMove);
    } else {
      range.moveEnd("character", offsetToRangeCharacterMove(el, endOffset));
      range.moveStart("character", startCharMove);
    }
    range.select();
  }
}

$("#foo").keypress(function(evt) {
  if (evt.which) {
    var charStr = String.fromCharCode(evt.which);
    var transformedChar = transformTypedChar(charStr);
    if (transformedChar != charStr) {
      var sel = getInputSelection(this),
        val = this.value;
      this.value = val.slice(0, sel.start) + transformedChar + val.slice(sel.end);

      // Move the caret
      setInputSelection(this, sel.start + 1, sel.start + 1);
      return false;
    }
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<textarea id="foo" cols="80" rows="8">Type in here and any 'a' will be you type will show up as a ' '</textarea>

UTF 中的间距代码：

\x20 – The standard space or \s

\u00A0 – The non-breaking space[\xC2\xA0] or &nbsp;

\x0D – Carriage Return or \r

\x0A – New Line or \n

\x09 – The tab or \t

html中的间距选项供您参考：

 - non breaking space : &nbsp;
 - en space : &#8194; or &ensp;
 - em space : &#8195; or &emsp;
 - 3-per-em space : &#8196;
 - 4-per-em space : &#8197; 
 - 6-per-em space : &#8198;
 - figure space : &#8199;
 - punctuation space : &#8200;
 - thin space : &#8201; or &thinsp;
 - hair space : &#8202;

如何让键盘的一个键在HTML中显示另一个字符？

How can I ask a key of the keyboard show another character in HTML?

html

keyboard

space