logo
down
shadow

Make javaScript (not JQuery!) "activate" on keypress a CSS button:active style


Make javaScript (not JQuery!) "activate" on keypress a CSS button:active style

By : Linda Powell
Date : November 21 2020, 11:01 PM
wish helps you Update: Good Point from @flen to use Element.classList.toggle(); witch supported in IE >= 10
code :
document.onkeypress = function(e) {
  if ((e.which || e.keyCode) == 115) { //this is the number code for the letter "S"
document.getElementById('start').click();
document.getElementById('start').classList.add("button-active");
  }
};

document.onkeyup = function(e) {
document.getElementById('start').classList.toggle("button-active");
}

function start() {
  console.log("start")
}
<style>
  /*set button-active */
  .button:active,
  .button-active {
    box-shadow: 0 5px #666;
    transform: translateY(4px);
  }
</style>

<input type="button" id="start" class="button" value="Start (S)" onclick="start();" />
document.onkeypress = function(e) {
  if ((e.which || e.keyCode) == 115) { //this is the number code for the letter "S"
    document.getElementById('start').click();
    if (document.getElementById('start').className.indexOf("button-active") == -1) document.getElementById('start').className += ' button-active';
  }
};

document.onkeyup = function(e) {
  document.getElementById('start').className = document.getElementById('start').className.replace(/button\-active/g, "");

}

function start() {
  console.log("start")
}
<style>
  /*set button-active */
  .button:active,
  .button-active {
    box-shadow: 0 5px #666;
    transform: translateY(4px);
  }
</style>

<input type="button" id="start" class="button" value="Start (S)" onclick="start();" />


Share : facebook icon twitter icon
when a button is "active", I want to make all images to the picture for "active"

when a button is "active", I want to make all images to the picture for "active"


By : Camilo
Date : March 29 2020, 07:55 AM
Does that help Firstly, if the items are divs, you'll need to use :hover, not :active.
Perhaps but the entire button in a single div (class commonButton). this way you can do something like this. This will cause all 3 divs to change when the container is hovered anywhere, rather than targeting the hovering of a single piece.
code :
.commonButton .commonButtonLeft
{
    ...
}
.commonButton .commonButtonRight
{
    ...
}
.commonButton .commonButtonContent
{
    ...
}

.commonButton:hover .commonButtonLeft
{
    ...
}
.commonButton:hover .commonButtonRight
{
    ...
}
.commonButton:hover .commonButtonContent
{
    ...
}
Have an unfocused C# program activate on keypress (eg. F1 sets a label to "Hello World")

Have an unfocused C# program activate on keypress (eg. F1 sets a label to "Hello World")


By : Clayton Engle II
Date : March 29 2020, 07:55 AM
wish of those help You can use WIN API RegisterHotKey function.
code :
[DllImport("user32")]
public static extern int RegisterHotKey(IntPtr hwnd, int id, int fsModifiers, int vk);
private void Form_Load(object sender, EventArgs e)
{
    RegisterHotKey(Handle, 42, 0, (int)Keys.F1);
}
private const int MOD_ALT = 0x1;
private const int MOD_CONTROL = 0x2;
private const int MOD_SHIFT = 0x4;
private const int MOD_WIN = 0x8;
private const int WM_HOTKEY = 0x312;

protected override void WndProc(ref Message m)
{
    base.WndProc(ref m);

    if (m.Msg == WM_HOTKEY)
    {
        if (!Visible)
            Visible = true;
        Activate();
        Keys vk = (Keys)(((int)m.LParam >> 16) & 0xFFFF);
        int fsModifiers = ((int)m.LParam & 0xFFFF);

        if (vk == Keys.F1 && sModifiers == 0)
            label.Text = "Hello World";
    }
}
Trigger a "button onClick" with a keypress with jQuery or Javascript

Trigger a "button onClick" with a keypress with jQuery or Javascript


By : Frank Crowder
Date : March 29 2020, 07:55 AM
wish of those help I have created JSfiddle link for the same:-
http://jsfiddle.net/c2S5d/26/
code :
$(function() {
    $(document).keydown(function(e) {
        switch (e.which) {
            case 38: // up key
                alert("up key event called")
                $("#upButt").trigger("click")
                break;
        }
    });
});
How to add "active" class to "this" parent on child button is clicked and toggle "active"

How to add "active" class to "this" parent on child button is clicked and toggle "active"


By : Kiran Pawar
Date : March 29 2020, 07:55 AM
To fix the issue you can do The below given code is just working fine apart from one more thing I need. , This might work:
code :
$scope.activate= function(index){
      if($scope.index == index)
          $scope.index = -1;
      else
          $scope.index = index;
};
How to trap "blur" or "keypress" enter 13 in javascript jquery - OR not, both

How to trap "blur" or "keypress" enter 13 in javascript jquery - OR not, both


By : Alejandro Suárez
Date : March 29 2020, 07:55 AM
should help you out If I am getting your requirement right, you want to execute the callback only once but currently it is getting executed twice.
If that is the case then you will need some way to indicate if the callback has been called already.
code :
$('#login-input-password').bind('blur keypress', function(e){
     if (e.type == 'blur' || e.keyCode == 13) {
        if (!$(this).data('done') {
            $(this).data('done', true);
         // do something only once, not twice
        // e.g., if I hit "[enter"] and tab to blur, I don't want it to call twice...
        }
     }
});
$('#login-input-password').bind('focus', function(e) {
    $(this).data('done', false);
});
Related Posts Related Posts :
  • Append blade file to jquery function
  • NodeJS TypeError: Cannot read property of undefined
  • Using ng-if to check angular variable from another directive in angularjs
  • Replacing [b][/b] to apply BOLD text on a DIV
  • Bootstrap-select, behavior like SO tags field
  • Class name changing dynamically from JSON object in Angular.js
  • to add button which will redirect to View Page of current row in JQGrid
  • firebaseAuth GoogleAuthProvider() signInWithRedirect
  • AngularJS 1 Restangular GET stripping #
  • How can I do column move in ui-grid on tap & hold?
  • How to track a javascript function?
  • Chart.JS: How to add Data to a specific dataset
  • Accessing 'this' inside the callback should reference my array
  • get empty request while posting
  • CSS Flip animation on click
  • How to hide element if filter returns null angularjs
  • Popups for checking/unchecking a checkbox
  • Loop event click jquery synchronize current status
  • "Export to excel" button kendogrid download more than 1 file
  • Load bootstrap forms from select page
  • Using Vue with django
  • JS Outputting a form value receives 'undefined' in console
  • Why do enzyme not find 'tr' in a table?
  • Inject GET parameter to target URL of a button, on click
  • tags in JS and css counter increment
  • Post "url-from' in a form
  • TypeError: $(...).magnificPopup is not a function
  • .toggleclass and .slidetoggle don't work
  • user agent for windows 7 vs 8 vs 10
  • How to write (A or B or C) followed by X in JavaScript regex?
  • Ember template convention
  • Sum multiple objects in multiple arrays and then average sums
  • Append a list to ul
  • React router Link; activeClassName not working
  • Site Overlay not working "Uncaught ReferenceError: closeNav is not defined"
  • How to require Stateless Functional Components (Unknown module _createWrapper?)
  • Binding a field state (disabled or hidden) according to different selected values in a combobox
  • stomp+ActiveMQ with SSL
  • creating an expression that acts like a .contains
  • Showcase the first n-items in a bootstrap grid
  • Background colour fade on carousel
  • Extend prototype using decorator
  • In react router v4 how does one link to a fragment identifier?
  • How to send local storage data with ajax to php page?
  • Javascript not working after publish to IIS
  • Remove GMT+530(Indian standard Time) without changing current time in javascript
  • Javascript: Syntax creating private object properties
  • how to make the table not having <thead> header fixed
  • ng-init with condition statements
  • javascript change height based on element's height
  • How to improve performance when loading CSV file into html table with javascript and ajax?
  • Javascript for rounding down in a finance calculator
  • .htaccess file rules are disturbing the menubar layout when window goes on mobile view
  • Angular 1.5 Option with ng-change
  • Angular Trix not working in all browsers
  • Vue.js add property to bound object
  • Push item with interfaces on typescript
  • jQuery on click event firing multiple times
  • Add first three elements of array in javascript
  • HTML5 video Uncaught TypeError: .play is not a function
  • shadow
    Privacy Policy - Terms - Contact Us © soohba.com