-
Notifications
You must be signed in to change notification settings - Fork 0
/
indexFontUrduKeyboard.html
123 lines (112 loc) · 3.73 KB
/
indexFontUrduKeyboard.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta author="Naseem Amjad">
<title>Urdu Keyboard</title>
<script src="assets/js/jquery-3.6.0.min.js"></script>
<script src="assets/js/urdunize.js"></script>
<style>
.ur {
font-family: 'Jameel Noori Nastaleeq', 'Nafees', 'Noto Naskh Urdu', 'Noto Naskh Arabic', 'Arial';
direction: rtl;
max-width: 100%;
padding: 4px;
background-color: #DCFFDC;
}
.textarea {
height: 4em;
width: 480px;
max-width: 96%;
padding: 5px;
line-height: 1.5em;
}
.urdu_keyboard_image {
height: auto;
width:480px;
max-width: 96%;
}
</style>
<link rel="stylesheet" type="text/css" href="assets/dist/github.min.css">
<link rel="stylesheet" type="text/css" href="assets/dist/jquery.fontpicker.css">
</head>
<body>
<form>
<div class="form-group">
<label for="kbd">Choose Keyboard:</label>
<select id="keyboard_type" class="form-control" onchange="changeKeyboard(this.value);">
<option value="sys">System</option>
<option value="urd">Urdu</option>
</select>
</div>
<input id="font1" type="text">
<p class="ur">انگریزی کی بورڈ سے اردو لکھیں: اپنی ویب سائٹ پر استعمال کرنے کے لیے jQueryکا پلگ اِن <a href="https://www.ajsoftpk.com/naseem_amjad/urdu/" target="_blank">یہاں سے حاصل کریں</a></p>
<p> Sample Urdu Text having all letters (Haroof) </p>
<p>ایک ٹیلے پر واقع مزارخواجہ فریدالدین گنج شکرؒ کے احاطہء صحن میں ذرا سی ژالہ باری چاندی کے ڈھیروں کی مثل بڑے غضب کا نظارہ دیتی ہے۔ </p>
<textarea id='u' class="ur textarea" placeholder="یہاں لکھیں"></textarea>
<textarea id='e' class="textarea" placeholder="Type here."></textarea>
<p><img class="urdu_keyboard_image" id="kbd_u" title="Urdu Phonetic Keyboard Layout (Unclickable)" alt="Image of Urdu Phonetic Keyboard to be used by Urdunize component" src="urdu_phonetic_keyboard.png"/></p>
</form>
<BR>
Now you can write Urdu Online using JavaScript (JQuery) based Urdu Text Box , the source code is Mobile Friendly and components are Responsive.<BR>
Presented by Naseem Amjad ([email protected])
<script src="assets/dist/jquery.fontpicker.js"></script>
<script>
function applyFont(element, fontSpec) {
if (!fontSpec) {
// Font was cleared
console.log('You cleared font');
$(element).css({
fontFamily: 'inherit',
fontWeight: 'normal',
fontStyle: 'normal'
});
return;
}
console.log('You selected font: ' + fontSpec);
// Split font into family and weight/style
var tmp = fontSpec.split(':'),
family = tmp[0],
variant = tmp[1] || '400',
weight = parseInt(variant,10),
italic = /i$/.test(variant);
// Apply selected font to element
$(element).css({
fontFamily: "'" + family + "'",
fontWeight: weight,
fontStyle: italic ? 'italic' : 'normal'
});
}
$('#font1')
.fontpicker()
.on('change', function() {
applyFont('#u', this.value);
});
</script>
<script>
function myinitialize(){
var $hiddenInput = $('<input/>',{type:'hidden',id:"naseem_amjad_keyboard_language",value:$("#keyboard_type").val()});
$hiddenInput.appendTo('body');
$("#u").val("");
$("#e").val("");
connectKeyboard("#u");
hideKeyboard("#u","rtl");
//hideKeyboard("#e","ltr");
}
function changeKeyboard(_name){
if (_name=="urd" || _name=="arb"){
showKeyboard("#u","rtl");
hideKeyboard("#e","ltr");
$("#naseem_amjad_keyboard_language").val("ur");
}
else
{
hideKeyboard("#u","rtl");
showKeyboard("#e","ltr");
$("#naseem_amjad_keyboard_language").val("en");
}
}
myinitialize();
</script>
</body>
</html>