مرحبا انا صممت كيبورد بتقنية css يعني ستايل كيبورد لكن بدي اذا ضغط على مثلا حرف p يطبع p في textarea .
و ثاني سؤال هو اذا المستخدم مثلا ضغط على حرف p يعمل لل div فاد إن fade in
و اسف اذا عنوان الموضوع غير مناسب للموضوع ..
Professional Technology Information
HTML , CSS , PHP , JQuery , Action Script
Photographic Designer & websites Designer : Dinamic Sites & photographic Sites & Flash Sites
IF YOU WANT SEE MY WORKS
VISIT THIS LINK
اخي اذل كنت تريد الاجابة عن سؤالك فقط بالستخدام مكتبة الـ jquery للاسف فلن اقدر على مساعدتك فأنا لا اعرف إلا القليل جدا في jquery لكن يمكنك حل الموضوع بكل سلاسة باستخدام javascript بدون اي مكتبات اضافية
الطريقة بشكل بسيط : اذا ضغط المستخدم على زر p فسيتم اضافة حرف الp الى الكتابة الموجودة في textarea
function add_char(x)
{
var text_value = document.getElementById('text').value;
document.getElementById('text').value = text_value + x;
}طبعا باعتبار id لل textarea يساوي text وعندما تريد ان تطبع اي حرف قم باضافة خاصية onclick
<span onclick="add('s')">s</span>بامكانك تجربة الكود التالي :
<html>
<head>
<script type="text/javascript">
function add_char(x)
{
var text_value = document.getElementById('text').value;
document.getElementById('text').value = text_value + x;
}
</script>
</head>
<body>
<span onclick="add_char('s')" style="cursor: pointer;">s</span>
<br>
<textarea id="text" cols="20" rows="10"></textarea>
</body>
</html>اما بالنسبة الى سؤالك الثاني من اجل ال fade in فلم افهم هل تريد عمل fade in للزر عندما يضغط عليه المستخدم؟
على كل حال يمكنك استخدام css3 transition من اجل القيام بهذه المهمة بدون استخدام ال jquery الرجاء توضيح هذه النقطة
هذا جزء من لعبة صممتها قديما ربما قد يساعدك
$(document).ready(function(){
$(document).bind('keydown', 'up',function (evt){
play_click();
$('#a1,#a2,#a3,#a4,#a5,#a6').removeClass("a_class");
switch ($('#let').text())
{
case '1':
play_alef();
$('#words').append('ا');
$('#let').text('');
break;
case "12":
play_baa();
$('#words').append('ب');
$('#let').text('');
break;
case '2345':
play_taa();
$('#words').append('ت');
$('#let').text('');
break;تم تعديل هذه المشاركة بواسطة الفيل الطائر في 19 نوفمبر 2012 في 11:36
السلام عليكم
- بالإضافة لمشاركة أخي linux web man و الفيل الطائر أضيف أنك لفعل هذا بسهولة بـjavaScript يجب أن تضع مستمع لأحداث لوحة المفاتيح keybord event لتتمكن من معرفة المفتاح الذي تم الضغط عليه من المستخدم بسهولة وتنفيذ اللازم .
- أو إستخدام أحداث لوحة المفاتيح في مكتبة jQuery على هذا الرابط .
- وأيضاً يمكن دمج لوحة مفاتيح كـplugin مع jQuery UI والتالي رابط تنزيل الـkeybord plugin للإطلاع على الكود المصدري إن أردت
- وهذا تطبيق أخر أبسط من السابق :
لاتحسبن العلم ينفع وحده مالم يتوج ربه بخلاق
لا إله إلا أنت سبحانك إني كنت من الظالمين
بصراحة اجابة الأخ الاخ اعجبتني و هي اضافة الحروف الى المحرر ...
<html>
<head>
<script type="text/javascript">
function add_char(x)
{
var text_value = document.getElementById('text').value;
document.getElementById('text').value = text_value + x;
}
</script>
</head>
<body>
<span onclick="add_char('s')" style="cursor: pointer;">s</span>
<br>
<textarea id="text" cols="20" rows="10"></textarea>
</body>
</html>و يمكنني جعلها تطبيق لكل text area
طيب مثلا الان في مكان فاضي في الصفحة المستخدم ضغط مثلا على حرف F بدي عند الضغط على حرف F من لوحة المفاتيح يعمل fade in للديف .
يعني مثلا توضيح اكثر اقراء العبارة بين القوسين
(اهلا بك يا زائرنا الجديد اضغط على حرف R للتسجيل) ...
و شكرا جزيلا للأخوان الذي شاركوني في هذا الموضوع .
Professional Technology Information
HTML , CSS , PHP , JQuery , Action Script
Photographic Designer & websites Designer : Dinamic Sites & photographic Sites & Flash Sites
IF YOU WANT SEE MY WORKS
VISIT THIS LINK
السلام عليكم
بالنسبة الى موضوع كيفية الانتقال الى فقرة او غيرها يمكنك ذلك بطريقتين : الطريقة الاولى باستخدام خاصية accesskey في HTML لكن يجب على المستخدم الضغط على زر alt او shift + alt بالاضافة الى الحرف
اما الطريقة الثانية في javascript و ذلك باستخدام event.keyCode لكن القيمة المعادة هي قيمة الحرف في ASCII code يمكنك تجربة هذه المثال من اجل التنقل الى فقرة معينة على سبيل المثال :
<html>
<head>
<title>key shortcut</title>
<script type="text/javascript">
function go(e)
{
if(e.keyCode == 82)
{
window.location = '#content';
}
}
</script>
</head>
<body onkeydown="go(event)">
press 'r' key to go to content
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<div id="content">this is the DIV</div>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>End
</body>
</html>اسف على العدد الكبير من br :happy:
اتمنى ان تكون قد وصلتك الفكرة, الرابط التالي يحوي معلومات تفصيلية http://unixpapa.com/js/key.html
اما بالنسبة الى fade in حسب ما فهمت انك تريد شيئا مثل هذا التأثير :
<html>
<head>
<title>key shortcut</title>
<style>
#div
{
display: block;
width: 200px;
height: 200px;
background: #2c5aa4;
opacity: 0;
-moz-transition: ease-in 2s opacity;
-webkit-transition: ease-in 2s opacity;
-o-transition: ease-in 2s opacity;
}
</style>
<script type="text/javascript">
function change()
{
document.getElementById('div').style.opacity = 1;
}
</script>
</head>
<body>
<div id="div"></div>
<a href="#" onclick="change()">fade in</a>
</body>
</html>تم تعديل هذه المشاركة بواسطة linux web man في 20 نوفمبر 2012 في 22:29