2011-01-29 1 views
1

Я хотел бы иметь кнопку на своем сайте, который имитирует CTRL ++ (зум-ин). Поэтому мне нужно создать 2 нажатия клавиш или что-то еще. У меня есть на следующие которых пожары 1 нажатие:JQuery клавиш на clickevent

<html> 
<head> 
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.4.4.min.js"></script> 
    <title>Stackoverflow</title> 
</head> 
<body> 
<script type="text/javascript"> 
    function simulateKeyPress(character) { 
     jQuery.event.trigger({ type: 'keypress', which: character.charCodeAt(0) }); 
    } 

    function pressCtrlPlus() { 
     simulateKeyPress("="); 
    } 

    $(function() { 
     $('body').keypress(function (e) { 
      alert(e.which); 
     }); 
    }); 
</script> 

<input type="button" value="Ctrl +" ONCLICK="pressCtrlPlus();"> 

</body> 
</html> 

Знает ли кто, как создать CTRL ++ событие, нажав на кнопку?

+0

Возможный дубликат: http://stackoverflow.com/questions/2445613/how-can-i-check-if-key-is-pressed-during-click-event-with-jquery – mVChr

+0

возможного дубликата [запуск функций масштабирования браузера и масштабирования] (http://stackoverflow.com/questions/4539955) и [другие] (http://stackoverflow.com/search?q=javascript+zoom+in). Пожалуйста, найдите, прежде чем отправлять сообщения. –

+0

Возможный дубликат [запуск браузера Функции масштабирования и масштабирования] (http://stackoverflow.com/questions/4539955/triggering-browser-zoom-in-and-zoom-out-funtions) –

ответ

0

По этой теме SO: Calling keyevent from mouse Я создал следующий тест:

<html> 
<head> 
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.4.4.min.js"></script> 
    <title>Stackoverflow</title> 
</head> 
<body> 
<script type="text/javascript"> 
    function zoomin(zlevel) { 
     var _body = parent.parent.document.body; 

     if (jQuery.browser.msie) { 
      _body.style.zoom = zlevel;    
     } 
     else 
     { 
      if (typeof _body.style.MozTransform == "string")  
       _body.style.MozTransform = "scale(" + (zlevel) + ")"; 
      else if (typeof _body.style.zoom == "string") 
       _body.style.zoom = (zlevel*100) + "%";    
     } 
    } 
</script> 

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 

<input type="button" value="Ctrl0" ONCLICK="zoomin(1.0);"> 
<input type="button" value="Ctrl+" ONCLICK="zoomin(1.15);"> 
<input type="button" value="Ctrl++" ONCLICK="zoomin(1.3);"> 
</body> 
</html> 

Но он по-прежнему действует странно. Я еще не видел решения, которое действует как масштабирование с помощью сочетания клавиш CTRL + +. Разве это не может быть сделано?

0

Для того, чтобы сохранить функционирование, необходимо помнить текущий уровень увеличения.

<html> 
<head> 
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.4.4.min.js"></script> 
    <title>Stackoverflow</title> 
</head> 
<body> 
<script type="text/javascript"> 
    function zoomin(zlevel) { 
     zlevel = $('#zlevel').val() * zlevel; 
     $('#zlevel').val(zlevel); 

     var _body = parent.parent.document.body; 

     if (jQuery.browser.msie) { 
      _body.style.zoom = zlevel;    
     } 
     else 
     { 
      if (typeof _body.style.MozTransform == "string")  
       _body.style.MozTransform = "scale(" + (zlevel) + ")"; 
      else if (typeof _body.style.zoom == "string") 
       _body.style.zoom = (zlevel*100) + "%";    
     } 
    } 
</script> 

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 

<input type="button" value="Ctrl0" ONCLICK="zoomin(0.9);"> 
<input type="button" value="Ctrl+" ONCLICK="zoomin(1.15);"> 
<input type="button" value="Ctrl++" ONCLICK="zoomin(1.3);"> 
<input type="hidden" value="1" id="zlevel"> 
</body> 
</html>