From Koha Test Wiki MediaWiki MySQL Binary

Home > Documentation
Home > Documentation
Tips & Tricks > Tips & Tricks/Customising Notices and Slips > 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

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>

How to add an OPAC screen keyboard

From Koha Test Wiki MediaWiki MySQL Binary

Contents

Bootstrap OPAC

OpacUserJs

OpacUserCss

OpacHeader

Pre-Bootstrap OPAC

OpacUserJs

OpacUserCss

OpacHeader

Views

Personal tools

Search

koha links

Navigation

Categories

Toolbox