Rectangle 27 0

Just bind the focus and then check the event to see if e.which == 9 // tab.

My original idea did not work (thanks @Juan). Using the combination of events should get you where you want to be. If the user clicks into the text box the last key press will not be a tab. All inputs are watching and storing the last key code to pass to the focus event. here is the fiddle

var lastKeyCode = 0;
$('input').focus(function(e) {
    if(lastKeyCode == 9)
         // tabbed into field
    else
         // clicked into field
}).keydown(function(e){
    if(e.which == 9) // added timeout to clear lastkeypress
        setTimeout(function(){lastKeyPress = 0}, 50);
    lastKeyPress = e.which; // store last key code
});

@Josiah: I don't think this works--In FF I get undefined even if I tab into the field.

Doesn't work: jsfiddle.net/3py9V. If you suggest something that is untested, you should mention that your answer is an untested suggestion

@Juan and @Andrew - thanks for pointing that out. I updated the post.

You'd be better off keeping the previous answer, and adding an update, otherwise the comments don't make sense. This still doesn't work though... if you click on the second input, then click tab, then click back into either input, it'll think it's a tab. Works most of the time though

javascript - jQuery handing both focus and click on an element - Stack...

javascript jquery events focus mouse
Rectangle 27 0

I just use a cookie. I save the id of the last clicked item in the cookie, and then on load I get the id from the cookie, use that to query the dom for the element, and then set focus to it. i also used JQuery in my personal project, so i converted into straight JS for this answer since the question is tagged as javascript, i hope my conversion is alright.

function setCookie(cname, cvalue) {
    var d = new Date();
    d.setTime(d.getTime() + (1 * 24 * 60 * 60 * 1000));
    var expires = "expires=" + d.toGMTString();
    document.cookie = cname + "=" + cvalue + "; " + expires;
}

function getCookie(cname) {
    var name = cname + "=";
    var ca = document.cookie.split(';');
    for (var i = 0; i < ca.length; i++) {
        var c = $.trim(ca[i]);
        if (c.indexOf(name) == 0) return c.substring(name.length, c.length);
    }
    return "";
}

element.attachEvent('onclick', function() {
   setCookie(document.URL + '-lastclick', element.getAttribute('id'))
});

window.onload = function() {
  var elementId = getCookie(document.URL + '-lastclick');
  document.getElementById(elementId).focus();

  // personally i do a .animate({ scrollTop: pos}) to scroll to my object, but you get the gyst.
}

This doesn't work very will if you happen to have two instance of this going on at the same time. One will override the other.

it should only save one instance per url, i dont think ive ever run into issues with multiple instances, that i know of.

A user can load up multiple tabs of your site.

but cookies are shared between tabs, so if they open up a new tab, they are taken straight to where they were last, not such a bad thing.

granted... you're smarter than me, so you may be barking up the right tree, and I may be oblivious to the shortcomings of my solution. :)

html - Using History object/javascript to redirect the user to a speci...

javascript html browser-history
Rectangle 27 0

$("input[type=text],textarea").click(
   $(this).removeClass("your_old_class").addClass("your_new_class")
);

No this is not what I want to do.. Please check the link to redactor air mode imperavi.com/redactor/examples/air .. when you click on text.. there is a stylesheet editor popup next to it.. I don't want this for the whole textarea.. I just want for one input/textarea box

is it to change only the selected text what you want?

Change the INPUT[type=text] or TEXTAREA that have focus.

I'm sorry I'm not getting what are you after. if you want reasonable help you need to describe clearly what you want.

I want a complete jquery script or javascript that..when I click on the INPUT or TEXTAREA.. the simple font style editor shows up like [B][U][I][LEFT ALIGN][RIGHT ALIGN][CENTER ALIGN]. Then when you click on any of this button.. the style of that textarea/input changes altogether for any text in that input box.

Change input/textarea stylesheet on element focus (click) using javasc...

javascript jquery css wysiwyg css-editor
Rectangle 27 0

define a css class called focused and apply the style there.

after better understanding of what you need, think about something like this.

create an invisible, floating (absolute positioned) panel- it will be the "css editor".

now, on every focus on an input, get to know it's location on document, and display the invisible floating css editor relatively. look at this idea:

$(document).on('focus', 'input[type=text],textarea', function(){
    $('.css-editor').css({left: $(this).offset().left+'px', top: $(this).offset().top+'px'}).show();
});
$(document).on('blur', 'input[type=text],textarea', function(){
    $('.css-editor').hide();
});

note that there's no need to remove and re-create this hidden element. you can create it once on DOM and manipulate it's position & visibility.

No this is not what I want to do.. Please check the link to redactor air mode imperavi.com/redactor/examples/air .. when you click on text.. there is a stylesheet editor popup next to it.. I don't want this for the whole textarea.. I just want for one input/textarea box

HA haaa no.. Thanks for trying.. I know there are several ways to add and remove element from DOM.. in my case is the CSS Editor... I know it will take probably 50-100 lines of code to do the stylesheet editor I want. I also need to implement a better UI than this dropdown select. + hours of debugging. I just want to know if there is already one on the internet so I can use instantly.

Change input/textarea stylesheet on element focus (click) using javasc...

javascript jquery css wysiwyg css-editor
Rectangle 27 0

You cannot focus on two elements, it will be either the input text field or the radio button. But you should use JavaScript or jQuery, when you click on the radio button to focus on the field below, or when you enter value in the field below to check the radio button above.

html - Linking radio buttons and text inputs - Stack Overflow

html forms input radio-button textinput
Rectangle 27 0

yes it would not work because in jquery .focus() is an event (similar to .click() while in JS .focus() puts focus on the desired element.

var clrBtn = $('#cleanButton'); //from jQuery to JavaScript
$('#cleanButton').val('');
clrBtn.focus(); // here the focus goes to clnBtn (JS function)

jquery - Set textfield value without losing the focus - Stack Overflow

jquery focus textarea textfield
Rectangle 27 0

You cannot focus on two elements, it will be either the input text field or the radio button. But you should use JavaScript or jQuery, when you click on the radio button to focus on the field below, or when you enter value in the field below to check the radio button above.

html - Linking radio buttons and text inputs - Stack Overflow

html forms input radio-button textinput
Rectangle 27 0

I've read a few times now, that one can't focus table rows but only can focus elements, which accepts input by the user. Otherwise I think there must be a way to simulate a click on a table row by jquery/javascript! I tried the following:

document.onkeydown = function(event) {
  ...
  else if (event.keyCode == 9 && event.ctrlKey) {
   $('#messagelist tr').on('click', function () {
    alert('I was clicked');
    });
    $('#messagelist tr').eq(1).click();
  }
... 
}

The alert is shown! But the row isn't "marked"!?

javascript/jquery: focus() not working - Stack Overflow

javascript jquery focus roundcube
Rectangle 27 0

I just use a cookie. I save the id of the last clicked item in the cookie, and then on load I get the id from the cookie, use that to query the dom for the element, and then set focus to it. i also used JQuery in my personal project, so i converted into straight JS for this answer since the question is tagged as javascript, i hope my conversion is alright.

function setCookie(cname, cvalue) {
    var d = new Date();
    d.setTime(d.getTime() + (1 * 24 * 60 * 60 * 1000));
    var expires = "expires=" + d.toGMTString();
    document.cookie = cname + "=" + cvalue + "; " + expires;
}

function getCookie(cname) {
    var name = cname + "=";
    var ca = document.cookie.split(';');
    for (var i = 0; i < ca.length; i++) {
        var c = $.trim(ca[i]);
        if (c.indexOf(name) == 0) return c.substring(name.length, c.length);
    }
    return "";
}

element.attachEvent('onclick', function() {
   setCookie(document.URL + '-lastclick', element.getAttribute('id'))
});

window.onload = function() {
  var elementId = getCookie(document.URL + '-lastclick');
  document.getElementById(elementId).focus();

  // personally i do a .animate({ scrollTop: pos}) to scroll to my object, but you get the gyst.
}

This doesn't work very will if you happen to have two instance of this going on at the same time. One will override the other.

it should only save one instance per url, i dont think ive ever run into issues with multiple instances, that i know of.

A user can load up multiple tabs of your site.

but cookies are shared between tabs, so if they open up a new tab, they are taken straight to where they were last, not such a bad thing.

granted... you're smarter than me, so you may be barking up the right tree, and I may be oblivious to the shortcomings of my solution. :)

html - Using History object/javascript to redirect the user to a speci...

javascript html browser-history
Rectangle 27 0

/* ========================================================================
 * Bootstrap: dropdown.js v3.0.2
 * http://getbootstrap.com/javascript/#dropdowns
 * ========================================================================
 * Copyright 2013 Twitter, Inc.
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 * http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 * ======================================================================== */


+function ($) { "use strict";

  // DROPDOWN CLASS DEFINITION
  // =========================

  var backdrop = '.dropdown-backdrop'
  var toggle   = '[data-toggle=dropdown]'
  var Dropdown = function (element) {
    var $el = $(element).on('click.bs.dropdown', this.toggle)
  }

  Dropdown.prototype.toggle = function (e) {
    var $this = $(this)

    if ($this.is('.disabled, :disabled')) return

    var $parent  = getParent($this)
    var isActive = $parent.hasClass('open')

    clearMenus()

    if (!isActive) {
      if ('ontouchstart' in document.documentElement && !$parent.closest('.navbar-nav').length) {
        // if mobile we we use a backdrop because click events don't delegate
        $('<div class="dropdown-backdrop"/>').insertAfter($(this)).on('click', clearMenus)
      }

      $parent.trigger(e = $.Event('show.bs.dropdown'))

      if (e.isDefaultPrevented()) return

      $parent
        .toggleClass('open')
        .trigger('shown.bs.dropdown')

      $this.focus()
    }

    return false
  }

  Dropdown.prototype.keydown = function (e) {
    if (!/(38|40|27)/.test(e.keyCode)) return

    var $this = $(this)

    e.preventDefault()
    e.stopPropagation()

    if ($this.is('.disabled, :disabled')) return

    var $parent  = getParent($this)
    var isActive = $parent.hasClass('open')

    if (!isActive || (isActive && e.keyCode == 27)) {
      if (e.which == 27) $parent.find(toggle).focus()
      return $this.click()
    }

    var $items = $('[role=menu] li:not(.divider):visible a', $parent)

    if (!$items.length) return

    var index = $items.index($items.filter(':focus'))

    if (e.keyCode == 38 && index > 0)                 index--                        // up
    if (e.keyCode == 40 && index < $items.length - 1) index++                        // down
    if (!~index)                                      index=0

    $items.eq(index).focus()
  }

  function clearMenus() {
    $(backdrop).remove()
    $(toggle).each(function (e) {
      var $parent = getParent($(this))
      if (!$parent.hasClass('open')) return
      $parent.trigger(e = $.Event('hide.bs.dropdown'))
      if (e.isDefaultPrevented()) return
      $parent.removeClass('open').trigger('hidden.bs.dropdown')
    })
  }

  function getParent($this) {
    var selector = $this.attr('data-target')

    if (!selector) {
      selector = $this.attr('href')
      selector = selector && /#/.test(selector) && selector.replace(/.*(?=#[^\s]*$)/, '') //strip for ie7
    }

    var $parent = selector && $(selector)

    return $parent && $parent.length ? $parent : $this.parent()
  }


  // DROPDOWN PLUGIN DEFINITION
  // ==========================

  var old = $.fn.dropdown

  $.fn.dropdown = function (option) {
    return this.each(function () {
      var $this = $(this)
      var data  = $this.data('dropdown')

      if (!data) $this.data('dropdown', (data = new Dropdown(this)))
      if (typeof option == 'string') data[option].call($this)
    })
  }

  $.fn.dropdown.Constructor = Dropdown


  // DROPDOWN NO CONFLICT
  // ====================

  $.fn.dropdown.noConflict = function () {
    $.fn.dropdown = old
    return this
  }


  // APPLY TO STANDARD DROPDOWN ELEMENTS
  // ===================================

  $(document)
    .on('click.bs.dropdown.data-api', clearMenus)
    .on('click.bs.dropdown.data-api', '.dropdown form', function (e) { e.stopPropagation() })
    .on('click.bs.dropdown.data-api'  , toggle, Dropdown.prototype.toggle)
    .on('keydown.bs.dropdown.data-api', toggle + ', [role=menu]' , Dropdown.prototype.keydown)

}(jQuery);

javascript - perform action on bootstrap dropdown item selection - Sta...

javascript jquery css twitter-bootstrap
Rectangle 27 0

The focus event is sent to an element when it gains focus. This event is implicitly applicable to a limited set of elements, such as form elements (<input>, <select>, etc.) and links (<a href>).

$('#ooo').bind('focus click', function () {
    $('#kkk').text('hello');
});

$('#ooo').blur( function () { // you can use `blur` handler
    $('#kkk').empty();
});

Well the idea is that if the user's focus is anywhere in the parent div #ppp, the "hello" text will appear ... I.e. not just when the input has the focus.

hover
mouseenter

The real estate is going to be much smaller with several rows of similar functionality. It would be jumping around too much if I did that. I guess the lags something I'll have to live with?

@RyanGrush: Could you update your fiddle with a bit more html to better reflect your real situation with several rows? I have a couple of ideas that might help but I want to see your real html to be sure I'm on the right track.

javascript - Jquery two elements, toggles on focus/click ... works but...

javascript jquery javascript-events focus
Rectangle 27 0

After a little wrangling I have a solution :)

$('#ooo').focus(function () {
    $('#kkk').text('hello');
    visible = true;
});


$('* :not(#ooo)').focus( function() {
    if (visible) {
       $('#kkk').empty();
       visible = false;
    }
});

javascript - Jquery two elements, toggles on focus/click ... works but...

javascript jquery javascript-events focus
Rectangle 27 0

Don't you want to just focus back on the element after click on focusout?

$jQ(window).load(function refreshSummary() {
    var activeElement;
    $jQ("td").focus(function () {
        activeElement = document.activeElement;
    });
    $jQ("td").focusout(function () {
        var refreshLink = "ctl00_ctl00_m_g_78a9aecd_0fef_4b43_a2ff_45942fe92ea0_ctl01_ctl04_RefreshLink";

        document.getElementById(refreshLink).click();
        $(this).focus();
    });
});

Not quite sure what this is doing. $(this).focus() threw an error (probably related to it being on EP) so I used $jQ(this).focus() and now the focus seems to have disappeared entirely. I need the focus to return back to the original table cell.

Javascript/JQuery Return focus to specific element in grid after progr...

javascript jquery grid html-table enterprise-portal
Rectangle 27 0

Here's something that I think works based on the fact that the mousedown happens before the focus: http://jsfiddle.net/DvtMC/1/

var lastClick = null;
$('input').mousedown(function(e) {
  lastClick = e.target;
}).focus(function(e){
    if (e.target == lastClick) {
      console.log('click');
    } else {
      console.log('tab');    
    }
    lastClick = null;

});

To fix the bug discovered by Josiah, I did the following

var lastFocusedElement = null;
var isClick = false;
$('input').mousedown(function(e) {     
     isClick= true;
}).focus(function(e){

    // To prevent focus firing when element already had focus
    if (lastFocusedElement != e.target) {
        if (isClick) {
          console.log('click ----');
        } else {
          console.log('tab -----');    
        }
        lastFocusedElement = e.target;
        isClick = false;
    }
});

$(document.body).focus(function(){
  lastFocusedElement = document.body;
});

The one problem is that you don't get 'click' or tab when you switch away from the window and switch back. You get a focus event on the input that had focus, but you can't determine if it's a tab or a click, because it's neither.

I think this is the closest you'll get, I would try this on your page and see if the behavior is good enough.

@Juan - since we are into QA today, when you tab through all the fields to the body, then click into one the console logs click,tab

@Josiah: Good catch, I don't understand why it's happening though... I guess we provided the OP with two ways that work most of time, still investing another 2 minutes on this though

@Juan - yah thanks for talking me into spending entirely more time then i ever anticipated on this question ;) what can we do, dang developers.

javascript - jQuery handing both focus and click on an element - Stack...

javascript jquery events focus mouse
Rectangle 27 0

You could use the .on() method in jQuery. Here is another way to bind both events on the same element.

var hasClicked = false;
$('.myinputfield').on('mousedown : click',function(e){
     if (e.type == 'mousedown') {
        // execute code
        hasClicked = true;
     }
     if(e.type == 'focus' && !hasClicked) {
        //execute code
        console.log(e.type)
     }
     hasClicked = false;
});

javascript - jQuery handing both focus and click on an element - Stack...

javascript jquery events focus mouse
Rectangle 27 0

No need to bind focus event on the textbox, it itself have the focus,focusin and focusout events attached in it. So you can simply use either .onfocus or you can also use .live function.

$("input[type=text],textarea").live("focus",function() {
   var $th = $(this).before("<div class='css-editor'><select class='font-family-select'> <option></option></select><select class='font-style-select'><option>italic</option></select><select class='font-size-select'></select></div>");
});

Change input/textarea stylesheet on element focus (click) using javasc...

javascript jquery css wysiwyg css-editor