How to add an OPAC screen keyboard

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

Examples

• http://hfjs.bsz-bw.de

Bootstrap OPAC

In the Bootstrap OPAC the icon for the screen keyboard will show next to the cart and lists at the top of the page. When clicked, the table with the 'keyboard' shows in the header of the OPAC.

OpacUserJs

 
/* Screenkeyboard */
var currTarget = "";
function virtKB(os)
{
  currTarget.value+=os; 
  var v = currTarget.value;
  var r = currTarget.createTextRange();
  r.moveStart('character', v.length);
  r.select();
}
 
$(document).ready(function(){

$(".dropdown:eq(1)").after($("#vk_img").clone().show());
$("input").focus(function(){currTarget = this;});

});

OpacUserCss

 
/* Formatting of the table, change and extend to meet your color scheme if necessary */
#vk td:hover {
	background-color:#7DB713;
}

#vk td, th {
    background-color: #FFFFFF;
    border-bottom: 1px solid #DDDDDD;
    border-left: 1px solid #DDDDDD;
    padding: 3px 5px;
}

/* Show only the icon on smaller screens */
@media only screen and (max-width: 800px) {
.vklabel {
    display: none;
    }
}

OpacHeader

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

 
<li id="vk_img" onclick="$('#vk').toggle();" class="listsmenu" style="display:none"> 
<a id="listsmenu" class="dropdown-toggle" role="button" data-toggle="dropdown" href="#">
<span class="vkimg">
<img src="/opac-tmpl/lib/famfamfam/silk/keyboard.png" /></span><span class="vklabel"> Hebrew screen keyboard</span></span>
</span>
</a>
</li>

<table id="vk" dir="rtl" style="display:none; float: right;">
    <tr>
        <td class="keyboard" ondblclick="this.click()" onclick="virtKB('א');">א</td>
        <td class="keyboard" ondblclick="this.click()" onclick="virtKB('ב');">ב</td>
        <td class="keyboard" ondblclick="this.click()" onclick="virtKB('ג');">ג</td>
        <td class="keyboard" ondblclick="this.click()" onclick="virtKB('ד');">ד</td>
        <td class="keyboard" ondblclick="this.click()" onclick="virtKB('ה');">ה</td>
        <td class="keyboard" ondblclick="this.click()" onclick="virtKB('ו');">ו</td>
        <td class="keyboard" ondblclick="this.click()" onclick="virtKB('ז');">ז</td>
        <td class="keyboard" ondblclick="this.click()" onclick="virtKB('ח');">ח</td>
        <td class="keyboard" ondblclick="this.click()" onclick="virtKB('ט');">ט</td>
    </tr>
    <tr>
        <td class="keyboard" ondblclick="this.click()" onclick="virtKB('י');">י</td>
        <td class="keyboard" ondblclick="this.click()" onclick="virtKB('כ');">כ</td>
        <td class="keyboard" ondblclick="this.click()" onclick="virtKB('ך');">ך</td>
        <td class="keyboard" ondblclick="this.click()" onclick="virtKB('ל');">ל</td>
        <td class="keyboard" ondblclick="this.click()" onclick="virtKB('מ');">מ</td>
        <td class="keyboard" ondblclick="this.click()" onclick="virtKB('ם');">ם</td>
        <td class="keyboard" ondblclick="this.click()" onclick="virtKB('נ');">נ</td>
        <td class="keyboard" ondblclick="this.click()" onclick="virtKB('ן');">ן</td>
        <td class="keyboard" ondblclick="this.click()" onclick="virtKB('ס');">ס</td>
    </tr>
    <tr>
        <td class="keyboard" ondblclick="this.click()" onclick="virtKB('ע');">ע</td>
        <td class="keyboard" ondblclick="this.click()" onclick="virtKB('פ');">פ</td>
        <td class="keyboard" ondblclick="this.click()" onclick="virtKB('ף');">ף</td>
        <td class="keyboard" ondblclick="this.click()" onclick="virtKB('צ');">צ</td>
        <td class="keyboard" ondblclick="this.click()" onclick="virtKB('ץ');">ץ</td>
        <td class="keyboard" ondblclick="this.click()" onclick="virtKB('ק');">ק</td>
        <td class="keyboard" ondblclick="this.click()" onclick="virtKB('ר');">ר</td>
        <td class="keyboard" ondblclick="this.click()" onclick="virtKB('ש');">ש</td>
        <td class="keyboard" ondblclick="this.click()" onclick="virtKB('ת');">ת</td>
    </tr>
    <tr>
        <td class="keyboard" ondblclick="this.click()" onclick="virtKB('"');">"</td>
        <td class="keyboard" ondblclick="this.click()" onclick="virtKB(',');">,</td>
        <td class="keyboard" ondblclick="this.click()" onclick="virtKB('-');">-</td>
        <td class="keyboard" ondblclick="this.click()" onclick="virtKB(':');">:</td>
        <td class="keyboard"></td>
        <td class="keyboard" ondblclick="this.click()" onclick="virtKB(' ');">␣</td>
        <td class="keyboard"></td>
        <td class="keyboard"></td>
	<td class="keyboard" ondblclick="this.click()" onclick="$('#vk').hide();$('#vk_img').show();"
          <strong style="color:red">X</strong></td>
    </tr>
</table>

Pre-Bootstrap OPAC

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>