Like the question says, I am trying to capture a click on a textbox that is disabled.
Now, there may be a better way to do this, but right now I don't know it. Basically I have a textbox that is disabled sitting in a div. It is merely a placeholder. I have an event that captures the click on anywhere within it's parent div. Because the textbox is disabled, this does not work.
Does anyone know of a way to either:
Keep textbox enabled but don't allow the user to enter any input or display a cursor. (Essentially make it just a static textbox that the user can't interact with at all)
or
Disable textbox like I am now, but continue to capture the click events.
This is what the input looks like:
<li id="test_id" class="selected">
<label id="" for=""> Untitled</label>
<input id="text" type="textbox" name="default" disabled="disabled">
<div class="field_actions">
<span class="propertiesTip"></span>
</li>
and this is what the click event handler looks like:
$('#parent').on('click' , 'li, label, textbox', function (event) { /*...*/ }
This handles a click anywhere inside the div. It doesn't work on the textbox if it is disabled. Anyone encounter this before and have a solution? Thanks in advance
I know this was mentioned, but I would use read only. You can use CSS to style it to look disabled, and even to change the cursor to whatever you want like so:
input.myDisabledInput {
color: grey;
background-color: lightgray;
cursor:default
}
Instead of disabled, make it readonly.
Related
I'm implementing an autocomplete/combobox in dart. I'm using two elements for this, a <input type="text"> and a <ul> for the suggestions. I want to hide via css style display: none whenever the user leaves the input box. This works when using onBluron the input element.
If the user tries to click an item in the <ul>, the input looses focus and the <ul>is hidden before the click event on the <li> is run.
_listElement = new UListElement();
_textElement = new TextInputElement()
..onBlur((e) => setDisplayToNone(_listElement)); // hide element
I noticed that a jQueryUI implementation does not have this issue and I can not figure out how they detect when to hide the suggestion box. see https://jqueryui.com/autocomplete/
What alternate way can i use to hide the <ul> without hiding it on _textElement.onBlur?
If it helps, the two elements are always wrapped by a <div>. I'm looking for a dart-only solution, although vanilla-js answers that I can rebuild in dart are also appreciated.
Please look at events sequence:
input.focus
li.mousedown
input.blur
li.mouseup
li.click
So you might setup a flag variable, turn it up on li.mousedown, check it on input.blur and decide if you need to hide the list, and then turn it down on li.click
I am creating a suggestion box below a search box. I want it so that when the user has focus in the search box, and then clicks on one of the suggestions, it triggers an action. I have tried using jquery's on:
$(".searchbox + div").on("click", "a", function() {
$(".searchbox").val($(this).html());
});
My HTML structure is like this:
<input type="search" placeholder="Search" class="searchbox">
<div></div>
The links are dynamically inserted inside the div that follows the input.
The links do not have an href value, so they are not really links, I just want them to act like links.
When I click on one of the links, the searchbox loses focus, and, because of the css I have, the links get visibility:hidden. I think the searchbox loses focus before the link action is triggered, so it never is triggered. How could I get around this?
You can see it here.
Clarification: What I think is happening:
User clicks on link
Computer thinks, The user just clicked outside of the search box
Search box becomes blurred
CSS sees that search box is blurred, styles say to now make the suggestions visibility:hidden
Now the links are no longer clickable, so the event is never triggered.
Somewhere in your code you have a click handler that brings the search bar to the top and the rest of the UI into view. It executes when the user clicks anywhere that's not the search bar. You should add a statement that checks if the clicked element was an <a> element in the suggestion box.
So if this is the click handler. Also i think it's time to add an id to your suggestion div.
$(document).click(function(e){
var $clicked = $(e.target);
if($clicked.tagName == 'A' && $clicked.closest('#suggestionDivId').length>0)
$(".searchbox").val($(this).html());
else if(click was outside searchbar)
//move searchbar up and show UI
else
//click happened inside searchbar, do nothing.
})
I'm not sure why nobody understands your question, or why this question is being downvoted. It's a perfectly valid question.
EDIT:
I suggest wrapping the input and suggestion div with another div. Give this wrapper an attribute of tabindex="-1" so it can receive blur/focus events.
<div id="wrapper">
<input type="search" placeholder="Search" class="searchbox">
<div></div>
</div>
Then change your $(".searchbox").on("blur") to $("#wrapper").on("blur")
This way you can click anywhere in the suggestion box without the blur firing.
Alternatively, the mousedown event fires before the blur event. So try this maybe
$(".searchbox + div").on("mousedown", "a", function() {
$(".searchbox").val($(this).html());
});
You can use some plugins for that. Its too easy. For example if you work with any front framework like bootstrap, you can use typeahead.js plugin
I am trying to add javascript to set Focus on a button, and hope to make the button look just the way it does when a user 'tabs' thru the HTML Form to reach the button.
The page that I am working on has an button element:
<input type="Submit" id="myBtn" class="myBtnClass >
In javascript function, I set focus to it using:
$("#myBtn").focus() When this function is invoked, I can see change of button image. Also, when I click 'Enter', the form does get submitted. However, in this case, when the image changes, I don't see the "Dotted inline" that generally appears on buttons.
but the dotted line Does appear when a user "tabs" to that button.
Am I expected to do anything other than $("#myBtn").focus()" ?
you can use css property:
`outline`
Could be running in IE7 compatibility mode, or using the wrong doctype.
See this similar question for more info and possible solutions: CSS 'outline' property in IE, and jQuery errors
Is there a way force the keyboard on iPad to close on blur of div 'contenteditable'??
Here is a basic jsfiddle: http://jsfiddle.net/j_tufte/7HDmN/
I'd like to have the keyboard close when a user clicks on the button.
Any thoughts super appreciated.
Thanks.
As you have mentioned in your comment, element.blur() unfortunately doesn't work on an editable div. But you could instead move the focus to an actual input field and remove it again right away:
$('#otherBox').on('click', function(){
$('#orInput').focus().blur();
});
(This uses your jsFiddle HTML code).
There are downsides to this approach: you need another input field (which you can't set to display: hidden or visibility: hidden, but you can set it's size to 0 and opacity: 0). Also, the view may scroll to the location of this input field when the above handler is invoked. So you will need to place the second input field right next or behind to the editable div.
You will also need to take care of the input field not being targeted by the previous/next buttons: set it disabled.
<input id="orInput" disabled="disabled" style="width:0; height:0; opacity:0" type="text" />
For focussing/blurring you will then need to enable the field:
$('#otherBox').on('click', function(){
$('#orInput').removeAttr("disabled")
.focus().blur().attr("disabled", "disabled");
});
However, this is definitely a workaround. I haven't found any other solution yet (e.g. removing the contenteditable attribute doesn't work) but I'd very much like to hear other ideas.
You should be able to do exactly that -- attach an event listener to the button and use it to blur() the input field that caused the keyboard popup (use JavaScript to get a handle on that element and then call it's blur method). That supposedly closes the iPad keyboard.
I am building a web form for a login. I've decided to add in a few features I wouldn't normally. However I can't seem to get them to work in every instance. So, here's my problem.
On the form, as you progress through each of the inputs a javascript box on the side of the page scrolls down and notifies you about that input i.e. what they can enter, how many characters they have left.
It works great with text boxes, because i can use an onfocus and onblur event handler. However when you reach, for example, a div that has multiple check-boxes you can't exactly use the above event handlers for each input, because then they would have to select an option before the box tells them what it is about.
Ive tried using the onMouseOver and onMouseOut event handlers for the whole div, but it doesn't work fluidly.
So any suggestions? Maybe, is there a way to active a function if a users puts their cursor on a certain part of the screen?
hope this make sense,
thanks
could make a little ? icon or something next to it for someone to hover over, and attach the event to that...
...anyways...you sure you doing it right? post some code...for example, this works just fine..when I hover over the 2nd checkbox, I get the alert
<form>
<input type="checkbox" name="vehicle" value="Bike" /> I have a bike<br />
<input onmouseover="alert('test');" type="checkbox" name="vehicle" value="Car" /> I have a car
</form>
You should still have the focus/blur events on the checkboxes I think, for people using the keyboard.
Are you working with a js framework? With jQuery, you can simply do:
$(function() {
$(".div_around_the_checkboxes").hover(function() {
// show
},
function() {
// hide
});
});