Wie kann ich eine Taste der Tastatur bitten, ein anderes Zeichen in HTML anzuzeigen?

Question

Lassen Sie mich zuerst sagen, was ist ein halber Platz für diejenigen, die es nicht wissen. Vergleichen Sie zum Beispiel die zwei folgenden Hinweise.

میآیم - می آیم

Sie können den Abstand zwischen vergleichen می und آیم wenn normalen Raum und Halbraum verwendet.

Wie Mihan Nijat in seiner Antwort erwähnt, gibt es einen HTML-Code dafür ​. Normalerweise, wenn Sie einige Tastaturen wie Standard iranischen Tastatur verwenden, gibt es einige kombinierte Tasten dafür wie Shift + B.

Nun meine Frage ist das, ist es möglich, einen Halbraum von uns in HTML-Dokument zu definieren, die diese oben genannten nicht verwendet. Definieren Sie also einen bestimmten Halbraum mit der gewünschten Länge, z. B. 1 Pixel. Und ist es möglich, HTML zu bitten, ein Zeichen mit unserem selbstdefinierten Halbraum automatisch zu kompilieren?

Answer 1

auf eine Eingabe von der Tastatur bekommen, ersetzen Sie ihn durch etwas anderes. Siehe auch: filddle

Ersetzen Sie in der Geige einfach \x20 mit welcher UTF-Abstand Option Sie wollen.

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

Code:

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>

Spacing Codes in UTF:

\x20 – The standard space or \s 

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

\x0D – Carriage Return or \r 

\x0A – New Line or \n 

\x09 – The tab or \t 

Abstandsoptionen in html für Ihre Referenz:

- non breaking space :   
- en space :   or   
- em space :   or   
- 3-per-em space :   
- 4-per-em space :    
- 6-per-em space :   
- figure space :   
- punctuation space :   
- thin space :   or   
- hair space :   

Answer 2

ZERO WIDTH SPACE

Die ZERO WIDTH SPACE Raum zwischen zwei Zeichen erzeugt, ist aber nicht wirklich Raum mit Standard-Space in gleicher Breite. Dies ist sehr praktisch für arabische und persische Skripte.

gemeinhin abgekürzt ZWSP dieses Zeichen ist für die unsichtbare Worttrennung und für Zeilenumbruchsteuerung vorgesehen; es hat keine Breite, aber sein Vorhandensein zwischen zwei Zeichen verhindert nicht erhöhten Buchstaben Abstand in der Ausrichtung.

HTML Entity (dezimal): ​

Das komplette Detail ist here verfügbar.

Wenn Sie eine Taste drücken und ZERO WIDTH SPACE für Sie erstellen möchten, dann verwenden Sie JavaScript dafür mit Logik. Beispiel: Wenn A gedrückt wird, dann tu [dies]. Verwenden Sie den Schlüsselcode in der Logik.

Sie benötigen etwas wie folgt mit Ereignis hinzufügen Listener.

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

Im obigen Beispiel der 13 ganze Zahl für enter Schlüssel.

Wenn Sie nicht berechtigt sind, die Website zu ändern, und geben Sie einfach textarea oder input ein und dürfen HTML verwenden. Dann verwenden Sie ​ Code und es wird für Sie arbeiten.

Update: Ich habe gerade überprüft die Website und das Hinzufügen von Null-Breite Raum mit ctrl+b fügt keine fett Herz für mich. Ich habe deinen geposteten Text kopiert und das Word-Programm eingefügt. Und ersetzt alle ♥ mit Leerzeichen, und kopierte dann den Text und klebte im Forum mit past from word - icon.

Sehen Sie dieses Testbild: