Sostituzione barra verticale ("|") con Devanagari Danda (".") Non appena viene digitato nell'area testo

Voglio sostituire la barra verticale (|) con Devanagari Danda (.) Non appena viene digitato in textarea usando javascript.Sostituzione barra verticale ("|") con Devanagari Danda (".") Non appena viene digitato nell'area testo

Prima ho provato la soluzione fornita su How to change characters typed in Firefox. Ma aggiunge il personaggio solo alla fine.

Quindi, ho seguito la soluzione fornita su http://www.jsfiddle.net/EXH2k/6/ che è stata suggerita da Tim Down su Changing the keypress e anche su show different keyboard character from the typed one in google chrome. Ma non funziona per me (né in Firefox né in IE 10).

Codice:

<!DOCTYPE html> 
<html> 
<head> 
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
    <link type="text/css" rel="stylesheet" href="stylesheet.css" /> 
    <script type="text/javascript"> 
     function transformTypedChar(charStr) { 
      return charStr == "|" ? "।" : 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(); 
      } 
     } 

     $("#inputTextArea").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> 
</head> 
<body> 
    <textarea name="input" id="inputTextArea" rows="10"></textarea> 
</body> 
</html>

fonte

2013-10-03 jyotesh

Questo è abbastanza facile. Buttare via il codice con le nuove linee di movimentazione, ecc e fare solo quello:

$(document).ready(function() { 
    $('#my-input').on('input', function() { 
     var $input = $(this), 
      curVal = $input.val(); 
     var cursorPos = curVal.slice(0, this.selectionStart).length; 

     $input.val(curVal.replace(/[|]/g, '।')); 
     this.setSelectionRange(cursorPos, cursorPos); 
    }); 
});

esempio di lavoro: | (.) JSFiddle

fonte

2013-10-03 08:00:43 schlingel

BTW: Sto lavorando con Linux così ho solo provato in cromo e FF. Forse IE ha problemi: -/ – schlingel

+1 per preservare la posizione del cursore e per la pasta di supporto. –

Grazie. Funziona in Firefox, ma non in IE. Ma è ok. – jyotesh

voglio sostituire barra verticale() con Devanagari Danda appena come è digitato in textarea utilizzando javascript.

Dal momento che si desidera sostituire un carattere non appena viene digitata, questo può l'opzione più semplice:

$('#inputTextArea').on("keyup", function(e) { 
    $(this).val($(this).val().replace(/[|]/g, "।")); 
});

ho notato che, anche se non avete etichettato jQuery, che si sta utilizzando jQuery nella vostra codice. Quindi una soluzione basata su jQuery.

un violino veloce: http://jsfiddle.net/THEre/

fonte

2013-10-03 08:32:47 Abhitalks

+1 perché ho preso il modello/[|]/g da te. Ma il tuo codice non gestisce il cursore pos. – schlingel

@schlingel sì certo, ho buttato fuori una soluzione rapida e sporca per lui almeno per dargli una direzione. La tua è una soluzione più completa e ti avevo già fatto +1. :) – Abhitalks

Sostituzione barra verticale ("|") con Devanagari Danda (".") Non appena viene digitato nell'area testo

risposta

Problemi correlati