Tutorial PHP Pemula & Mahir

Question

Membuat Keyboard virtual pada textield

Joko Budi Pratomo · Dec 21, 2011

Numpang nanya dong para master PHP...
jadi begini,, misalnya ada sebuah textfield, lalu ketika textfield tersebut diklik muncul seperti tombol2 keyboard/keyboard virtual,, lalu ketika mengetik di keyboard tersebut,, hasil ketikan nya langsung tampil d textfield tersebut..

mohon bantuan nya..

Silahkan login untuk menjawab!

Answer 1

1

Ellyx Christian · Dec 22, 2011 · 1 Suka · 0 Tidak Suka

bisa pake jquery plugin http://www.webresourcesdepot.com/jquery-virtual-keyboard-for-safer-forms/
ada yang lebih bagus, google virtual keyboard api, tapi sudah deprecated and akan segera di tutup.

Answer 2

0

Joko Budi Pratomo · Dec 22, 2011 · 0 Suka · 0 Tidak Suka

lalu bagi mana misalnya saya mau langsung mengeprint tulisan tersebut..
saya sudah mencoba menggunakan
<script> window.print(); </script>
bisa,, akan tetapi layak nya sebuah aplikasi hal ini akan sangat mengganggu terus karena harus mengklik tombol OK pada kotak dialog tersebut,,
nah maksud saya bagaiman script agar ketika klik tombol print d halaman php,, tanpa basa - basi langsung dicetak oleh printer,,

d bantu ya Master Ellyx ..

Answer 3

1

Ellyx Christian · Dec 23, 2011 · 1 Suka · 0 Tidak Suka

mungkin bisa dicoba http://stackoverflow.com/questions/3203511/force-browser-not-to-show-print-dialog

Answer 4

0

Joko Budi Pratomo · Dec 24, 2011 · 0 Suka · 0 Tidak Suka

wahh. bingung saya hehe,,,ya sudah lah..
kembali ke virtual keyboard ny,, saya kan memakai http://www.webresourcesdepot.com/jquery-virtual-keyboard-for-safer-forms/..
pada texfield nya id=pwd,,, lalu d script javascript keyboard nya (javascrpt.js) tertera (#pwd) dengan asumsi bahwa pwd menjadi target isian textfield yg akan d inputkan oleh vkeyboard tersebut..

Lantas halaman form saya d memiliki sejumlah textfield yg dinamis mengikuti jumlah data nomor pada daftar pesan

$query=select nomor from daftarpesan;
while(k=mysql_fetch_array($query)){
echo"
<input type=text name=jumlah'"k[nomor]"' id=jumlah'"k[nomor]"'>
<? php } ?>

lalu bagaimana cara mengirimkan variabel id yg yg berisi jumlah k[nomor] ke halaman javascript ny keyboard.js yg sebelum nyberisi (#pwd)

mohon bantuanya lagi ya master Ellyx,, maaf saya masih newbie..

Answer 5

1

Ellyx Christian · Dec 27, 2011 · 1 Suka · 0 Tidak Suka

pertama yang harus kamu pelajari adalah menulis tag html dengan benar!, attribut tag html harus berada dalam tanda petik dua (dan tidak boleh ada petik dua didalamnya) atau petik satu (dan tidak boleh ada petik satu didalamnya).

$query=mysql_query("select nomor from daftarpesan");
while($k=mysql_fetch_array($query)){
echo'<input type="text" name="jumlah'.$k[nomor].'" id="jumlah'.$k[nomor].'"/>';
echo '<a href="#" class="showkeyboard">Keyboard</a>';
}

kemudian ubah javascriptnya menjadi:

$(document).ready(function(){
    
	var shifton = false;
	var txt = "";
	
	// toggles the keyboard to show or hide when link is clicked
	$(".showkeyboard").click(function(e) {
		e.preventDefault();
		var height = $('#keyboard').height();
		var width = $('#keyboard').width();
		leftVal=e.pageX-40+"px";
		topVal=e.pageY+20+"px";
		$('#keyboard').css({left:leftVal,top:topVal});
		if(txt != $(this).prev().attr('id')){
			txt = "#"+$(this).prev().attr('id');
			$("#keyboard").show();
		}else{
			$("#keyboard").hide();
		}
	});
	
	// makes the keyboard draggable
	$("#keyboard").draggable();	
	
	// toggles between the normal and the "SHIFT keys" on the keyboard
	function onShift(e) {
		var i;
		if(e==1) {
			for(i=0;i<4;i++) {
				var rowid = "#row" + i;
				$(rowid).hide();
				$(rowid+"_shift").show();
			}
		}
		else {
			for(i=0;i<4;i++) {
				var rowid = "#row" + i;
				$(rowid).show();
				$(rowid+"_shift").hide();
			}
		}
	 }
	
	// function thats called when any of the keys on the keyboard are pressed
	$("#keyboard input").bind("click", function(e) {
									   
		if( $(this).val() == 'Backspace' ) {
			$(txt).replaceSelection("", true);
		}
		
		else if( $(this).val() == "Shift" ) {
			if(shifton == false) {
				onShift(1);	
				shifton = true;
			}
			
			else {
				onShift(0);
				shifton = false;
			} 
		}
		
		else {
		
			$(txt).replaceSelection($(this).val(), true);
			
			if(shifton == true) {
				onShift(0);
				shifton = false;
			}
		}
	});
	
});

Answer 6

0

Joko Budi Pratomo · Dec 28, 2011 · 0 Suka · 0 Tidak Suka

jika saya menuliskan sepertini

echo'<input type="text" name="jumlah'.$k[nomor].'" id="jumlah'.$k[nomor].'"/>';

keluar pesan error
Notice: Use of undefined constant nomor - assumed 'nomor' in C:\xampp\htdocs\vkeyboard\index2.php on line 39
lalu saja tambahkan '' dibagian nomor menjadi

echo'<input type="text" name="jumlah'.$k['nomor'].'" id="jumlah'.$k['nomor'].'"/>';

dan cara ini berhasil.. Akan tetapi Hasil ketikan yg d ketikan d virtual keyboard tidak muncul sama sekali di textfield yang menjadi tempat nya..
Apakah disebabkan belum dimasukkan nya ke javascript mengenai name dan id textfield yang menjadi target ny?? akan tetapi saya masih bingung memasukkan nya dimana..

Answer 7

1

Ellyx Christian · Dec 30, 2011 · 1 Suka · 0 Tidak Suka

ubah javascriptnya jadi:

var txt = "";
$(document).ready(function(){
 
	var shifton = false;
 
	// toggles the keyboard to show or hide when link is clicked
	$(".showkeyboard").click(function(e) {
		e.preventDefault();
		var height = $('#keyboard').height();
		var width = $('#keyboard').width();
		leftVal=e.pageX-40+"px";
		topVal=e.pageY+20+"px";
		$('#keyboard').css({left:leftVal,top:topVal});
		if(txt != '#'+$(this).prev().attr('id')){
			txt = "#"+$(this).prev().attr('id');
			$("#keyboard").show();
		}else{
			txt = '';
			$("#keyboard").hide();
		}
	});
 
	// makes the keyboard draggable
	$("#keyboard").draggable();	
 
	// toggles between the normal and the "SHIFT keys" on the keyboard
	function onShift(e) {
		var i;
		if(e==1) {
			for(i=0;i<4;i++) {
				var rowid = "#row" + i;
				$(rowid).hide();
				$(rowid+"_shift").show();
			}
		}
		else {
			for(i=0;i<4;i++) {
				var rowid = "#row" + i;
				$(rowid).show();
				$(rowid+"_shift").hide();
			}
		}
	 }
 
	// function thats called when any of the keys on the keyboard are pressed
	$("#keyboard input").bind("click", function(e) {
 
		if( $(this).val() == 'Backspace' ) {
			$(txt).replaceSelection("", true);
		}
 
		else if( $(this).val() == "Shift" ) {
			if(shifton == false) {
				onShift(1);	
				shifton = true;
			}
 
			else {
				onShift(0);
				shifton = false;
			} 
		}
 
		else {
 
			$(txt).replaceSelection($(this).val(), true);
 
			if(shifton == true) {
				onShift(0);
				shifton = false;
			}
		}
	});
 
});

Answer 8

0

Joko Budi Pratomo · Dec 30, 2011 · 0 Suka · 0 Tidak Suka

Ya ternyata benarr,,
Lalu misalkan saya tambahkan tombol untuk sebuah kata misalkan tombol kata "papan",, lantas saya menambahkan tombol tersebut yg ada pada index.php

[code=php]
<?php
<div id="keyboard">
<div id="row0">
<input name="accent" type="button" value="`" />
<input name="1" type="button" value="1" />
<input name="2" type="button" value="2" />
<input name="3" type="button" value="3" />
<input name="4" type="button" value="4" />
<input name="5" type="button" value="5" />
<input name="6" type="button" value="6" />
<input name="7" type="button" value="7" />
<input name="8" type="button" value="8" />
<input name="9" type="button" value="9" />
<input name="0" type="button" value="0" />
<input name="-" type="button" value="-" />
<input name="=" type="button" value="=" />
<input name="papan" type="button" value="papan" />
<input name="backspace" type="button" value="Backspace" />
</div>
?>

hal tesebut berhasil,,, kata "papan" masuk ke dalam textfield akan tetapi hasilnya ketika diketik pencet 2 kali yg tadi nya papan menjadi "ppapanapan" dan jika d klik 3 kali "pppapanapanapan". penyebabnya pointer hanya berpindah selisih 1 huruf dari awal kalimat.

Bagaimana cara nya agar pointer tulisan tersebut menjadi di akhir kata...??

Answer 9

0

Joko Budi Pratomo · Jan 19, 2012 · 0 Suka · 0 Tidak Suka

gimana mas ??

Answer 10

0

Ellyx Christian · Jan 20, 2012 · 0 Suka · 0 Tidak Suka

coba ubah javascriptnya jadi:

var txt = "";
$(document).ready(function(){
 
	var shifton = false;
 
	// toggles the keyboard to show or hide when link is clicked
	$(".showkeyboard").click(function(e) {
		e.preventDefault();
		var height = $('#keyboard').height();
		var width = $('#keyboard').width();
		leftVal=e.pageX-40+"px";
		topVal=e.pageY+20+"px";
		$('#keyboard').css({left:leftVal,top:topVal});
		if(txt != '#'+$(this).prev().attr('id')){
			txt = "#"+$(this).prev().attr('id');
			$("#keyboard").show();
		}else{
			txt = '';
			$("#keyboard").hide();
		}
	});
 
	// makes the keyboard draggable
	$("#keyboard").draggable();	
 
	// toggles between the normal and the "SHIFT keys" on the keyboard
	function onShift(e) {
		var i;
		if(e==1) {
			for(i=0;i<4;i++) {
				var rowid = "#row" + i;
				$(rowid).hide();
				$(rowid+"_shift").show();
			}
		}
		else {
			for(i=0;i<4;i++) {
				var rowid = "#row" + i;
				$(rowid).show();
				$(rowid+"_shift").hide();
			}
		}
	 }
 
	// function thats called when any of the keys on the keyboard are pressed
	$("#keyboard input").bind("click", function(e) {
 
		if( $(this).val() == 'Backspace' ) {
			$(txt).replaceSelection("", true);
		}
 
		else if( $(this).val() == "Shift" ) {
			if(shifton == false) {
				onShift(1);	
				shifton = true;
			}
 
			else {
				onShift(0);
				shifton = false;
			} 
		}
 
		else {
 			var texts = $(this).val().split('');
			for(i=0;i<texts.length;i++){
				$(txt).replaceSelection(texts[i], true);
			}
			if(shifton == true) {
				onShift(0);
				shifton = false;
			}
		}
	});
 
});