0

How to detect clicked word in textarea with right click and show menu items from php sql database in in context menu in return of clicked word
We want to design roman transliteration with same pattern of google translation in this regard plz help us. We want two text boxes (Textareas) in one text box user write some text and click a button then the data will be transliterated in other box till this point its easy but we want user can change trnasliterated word with right click menu with various options. this is same like spell checker.

Edited by anees dayo

2
Contributors
2
Replies
12
Views
3 Years
Discussion Span
Last Post by diafol
0

Show your code so far. Which alphabets/codes do you want to support? When you say transliteration, I'm assuming that you don't mean translation too - just something to transform â -> a etc.

Edited by diafol

0

Here's a php script of mine I tried to port to js...

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Transliteration Service</title>
</head>

<body>
<form>
    <textarea id="source" onKeyUp="translit();" >АБВ</textarea>
    <textarea id="result" ></textarea>
</form>

<script>
var data =
    {
        "1040":{"char":"А", "main":"A"},
        "1041":{"char":"Б", "main":"B", "alt": ["W"]},
        "1042":{"char":"В", "main":"V"},
        "1043":{"char":"Г", "main":"G"},
        "1044":{"char":"Д", "main":"D"},
        "1045":{"char":"Е", "main":"E"},
        "1046":{"char":"Ж", "main":"Ch"},
        "1048":{"char":"И", "main":"I"},
        "1050":{"char":"К", "main":"K"},
        "1051":{"char":"Л", "main":"L"}
    };

    function translit()
    {
        var source = document.getElementById('source');
        var result = document.getElementById('result');
        var str = source.value;
        var len = str.length;
        var n = '';
        var val = '';
        for(i=0;i<len;i++)
        {
            var num = str.charCodeAt(i);
            val = (data[num] != undefined) ? data[num]['main'] : val = str.charAt(i);
            n += val;
        }
        result.value = n;   
    }

   document.getElementById('source').ondblclick = function () {
   var sel = (document.selection && document.selection.createRange().text) ||
             (window.getSelection && window.getSelection().toString());
   alert(sel);
};
</script>
</body>
</html>

References:
Double click event: http://stackoverflow.com/questions/2281426/how-to-get-selected-word-when-double-click-on-div-p-span

Without writing the whole thing, you can use the 'alt' array for the character if it exists for the list - however, this may be overkill if many characters have alts as the number of permutations could be large. In addition, doing this on the 'result' box is more of a challenge as it would need to reference back to the original 'source' - and due to the fact that you have 2 editable textboxes, there's no guaranteed way of "linking words"

Edited by diafol

This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.