How to add an OPAC screen keyboard

From Koha Wiki

Jump to: navigation, search
Home > Documentation > Tips & Tricks

The screen keyboard can be added to Koha's OPAC without changing any files. It's done by using system preferences only.

Examples

OpacUserJs 

 
var target = "";
function screenKb(character)
{
  target.value+=character; 
  var r = target.createTextRange();
  r.moveStart('character', target.value.length);
  r.select();
}
 
$(document).ready(function(){
$("input").focus(function(){target = this;});
});

OpacUserCss 

 
#screenKb td:hover {
    background-color:#EFF5FB;    
    }

OpacHeader

You can create a table with every script and all characters you can think of. Remove dir="rtl" from the table tag for LTR scripts. 

 
<span id="screenKb_img" onclick="$('#screenKb').show();$('#screenKb_img').hide();" style="position:fixed; top:3px; left:3px;"> 
     <img src="/opac-tmpl/prog/famfamfam/silk/keyboard.png" /> Hebrew Screen Keyboard
</span>
 
<table id="screenKb" dir="rtl" style="display:none; position:fixed; top:5px; left:5px;">
    <tr>
        <td class="keyboard" ondblclick="this.click()" onclick="screenKb('א');">א</td>
        <td class="keyboard" ondblclick="this.click()" onclick="screenKb('ב');">ב</td>
        <td class="keyboard" ondblclick="this.click()" onclick="screenKb('ג');">ג</td>
        <td class="keyboard" ondblclick="this.click()" onclick="screenKb('ד');">ד</td>
        <td class="keyboard" ondblclick="this.click()" onclick="screenKb('ה');">ה</td>
        <td class="keyboard" ondblclick="this.click()" onclick="screenKb('ו');">ו</td>
        <td class="keyboard" ondblclick="this.click()" onclick="screenKb('ז');">ז</td>
        <td class="keyboard" ondblclick="this.click()" onclick="screenKb('ח');">ח</td>
        <td class="keyboard" ondblclick="this.click()" onclick="screenKb('ט');">ט</td>
    </tr>
    <tr>
        <td class="keyboard" ondblclick="this.click()" onclick="screenKb('י');">י</td>
        <td class="keyboard" ondblclick="this.click()" onclick="screenKb('כ');">כ</td>
        <td class="keyboard" ondblclick="this.click()" onclick="screenKb('ך');">ך</td>
        <td class="keyboard" ondblclick="this.click()" onclick="screenKb('ל');">ל</td>
        <td class="keyboard" ondblclick="this.click()" onclick="screenKb('מ');">מ</td>
        <td class="keyboard" ondblclick="this.click()" onclick="screenKb('ם');">ם</td>
        <td class="keyboard" ondblclick="this.click()" onclick="screenKb('נ');">נ</td>
        <td class="keyboard" ondblclick="this.click()" onclick="screenKb('ן');">ן</td>
        <td class="keyboard" ondblclick="this.click()" onclick="screenKb('ס');">ס</td>
    </tr>
    <tr>
        <td class="keyboard" ondblclick="this.click()" onclick="screenKb('ע');">ע</td>
        <td class="keyboard" ondblclick="this.click()" onclick="screenKb('פ');">פ</td>
        <td class="keyboard" ondblclick="this.click()" onclick="screenKb('ף');">ף</td>
        <td class="keyboard" ondblclick="this.click()" onclick="screenKb('צ');">צ</td>
        <td class="keyboard" ondblclick="this.click()" onclick="screenKb('ץ');">ץ</td>
        <td class="keyboard" ondblclick="this.click()" onclick="screenKb('ק');">ק</td>
        <td class="keyboard" ondblclick="this.click()" onclick="screenKb('ר');">ר</td>
        <td class="keyboard" ondblclick="this.click()" onclick="screenKb('ש');">ש</td>
        <td class="keyboard" ondblclick="this.click()" onclick="screenKb('ת');">ת</td>
    </tr>
    <tr>
        <td class="keyboard" ondblclick="this.click()" onclick="screenKb('&#34;');">"</td>
        <td class="keyboard" ondblclick="this.click()" onclick="screenKb(',');">,</td>
        <td class="keyboard" ondblclick="this.click()" onclick="screenKb('-');">-</td>
        <td class="keyboard" ondblclick="this.click()" onclick="screenKb(':');">:</td>
        <td class="keyboard"></td>
        <td class="keyboard" ondblclick="this.click()" onclick="screenKb(' ');">&#9251;</td>
        <td class="keyboard"></td>
        <td class="keyboard"></td>
	<td class="keyboard" ondblclick="this.click()" onclick="$('#screenKb').hide();$('#screenKb_img').show();"
              <strong style="color:red">X</strong>
        </td>
    </tr>
</table>
Retrieved from "http://wiki.koha-community.org/wiki/How_to_add_an_OPAC_screen_keyboard"