Is there any way to open the ngx-typeahead when a user enters the input. In other words, on focus
I can get the dropdown to open if I type a single character into the input box, and then hit backspace.
just add this to the input
[typeaheadMinLength]="0"
Setting [typeaheadMinLength]="0" is the way to do this, but it also has the side effect of triggering a search even when nothing is typed in yet. I my case I needed to run the search on focus, but only if the textbox already had some content. I did this using a reference to the input's value:
<input #searchBox
[typeaheadMinLength]="searchBox.value?.length > 0 ? 0 : 1"
/>
You will need to do two things to make this possible:
First, set [typeaheadMinLength]="0" to have the input open when nothing has been typed yet.
Secondly, since the type ahead input is the first field in the form, you may need to add a small delay by also setting [typeaheadWaitMs]="300 (or some value). This is because the input may receive focus before the values are available.
Example:
Related
Ok.
Question is simple.
I want to call some document via ajax when user changed the value of <input type="text">.
Not even just 'keyboard typing' event.
Include that way... you know, the tool tip...which showing last input result of user...
I mean, that tool tip... position is below the input box... showing user's recent typed results... you know that.. hard to explain. don't know its name...
Anyway, I wanna call ajax document right after user changed value of <input type="text">... Not even just keyboard typing, include via choosing one of that tooltips by mouse clicking...
Well, I was able to call document right after 'key typing event'..
This is the code :
sensitiveInput.addEventListener('keyup',function(){
callDocument_viaAjax();
}
So I tried similar method with above code.
This is the code :
document.addEventListener('mouseup',function(){
if(sensitiveInput.value !== '') {
sensitiveInput.onchange=function(){
callDocument_viaAjax();
}
}
});
But this code had some delay.. That means, Failed to realize the ui that I want to make.
When user changed the value of <input type="text" id="sensitiveInput"> via choosing one of the tooltips below input box, callDocument_viaAjax() wasn't executed.
I had to click on the document one more time to execute callDocument_viaAjax()....
I don't know why this happening.
And don't know how to solve this problem...
Please some one show me the mercy...
I solved this problem by using an event trigger 'input'.
'input' event detect change of input even if do not lose the focus from input field.
('change' effects only when input field loses focus)
I'm making a page for a friend and I have a hidden text field and when the user types the text is transposed into a div so that it looks like they're typing on the screen rather than in an input field.
Here is a link to the page: http://merkd.com/godis.php
Here is the function that I use to respond to the key strokes:
$('#hiddenInput').keydown(function() {
var input = $('#hiddenInput').val();
var html = '<div style="float: left;">'+input+'</div><div id="cursor">|</div>';
$('#typingArea').html(html);
});
The text-field is visible right now so that you can see the problem. When text is entered or deleted, it doesn't respond until the next keypress. So if I type a single letter, nothing shows up until I type the next letter.
I looked at the jQuery .on() documentation but I couldn't find anything on this. Any help is much appreciated.
P.S. I know it should be in a separate question, but is there an easy way to make a text-field always in focus? I want to make it so that no matter where the user clicks or whatever, if they type, the text will still show up.
Use .keyup() event because when you first press (keydown), the letter is never typed so the var html is getting previous value. For second part you can bind keypress event in document to focus your input field.
I want to use the placeholder attribute for HTML input[type=text] elements such that the placeholder text disappears 'after' the user starts typing as opposed to 'onfocus'. Something like the sign-in page on pivotal tracker: https://www.pivotaltracker.com/signin
So far I've not used the placeholder attribute. Instead I used a 'onkeyup' event on the input field such that it empties the contents of the input field as soon as the user types the first character. To do this I've setup a custom attribute on the input element called 'data-received' which is false by default and is set to true as soon as the user types the first character. (So that it doesnt continue to empty the field). I can do something similar by 'unbinding' the 'keyup' method on the input field.
I m not so happy with this method and I was wondering if there s a better way to do this?
Ok I figured this out. I took some cues from the zendesk site as well. Firstly a placeholder attribute is not used. A label is used along with the input field with position: absolute. Its position to overlap the input field associated with it. Javascript is used to track the onkeyup event and as soon as it sees that the value of the input field is not empty, it simply hides the associated label. If you delete whatever your typed, it shows the label again :)
Check out:
Cross Browser HTML5 Placeholder Text (DEMO)
The placeholder attribute is used (if not using JS) but see above link to do it in a cross browser way.
HTML5 has a placeholder attribute but it may not work in all browsers.
HTML5 Placeholder Input Fields Fixed with jQuery has a fix that makes it work in all browsers.
jQuery plugins that do this
http://webcloud.se/code/jQuery-Placeholder/
http://www.iliadraznin.com/2011/02/jquery-placeholder-plugin/
Lets suppose we have a html text input element and it has text "abc" and cursor is between "b" and "c". If we press backspace key then how can we get the value "ac"?
Please note that in case of special keys KeyPress event do not fire. The only events that fire are KeyDown and KeyUp and none of them has the value after the effect of special key is applied. The effect is visible after the eventhandlers of these events exit but since we have only these two events we have to somehow get the affected/latest value inside these events.
We can go to a complex way by manually applying the effect ourselves but its very very complicated given the facts that we have to find the cursor position, write different code for different special keys and bring browser compatibility. The browser, whichever it is, is already applying the effect once the eventhandlers exit but is there some way to get that latest value in those events without manually applying it or in some other event?
Please note that I am not searching for "how to find which key is pressed". I can find that by looking at the event object inside the KeyDown or KeyUp event handlers. I want to apply the effect of the special key without using a lot of manual code.
I have already looked at Capturing HTML Text Input Key press after key has been applied?. Its talking about a different thing than my question.
My ultimate task is to have a web page with only two controls: a textbox and a button. The button is initially disabled. User can type in textbox and on every key its checked that there is some text in the textbox, if there is then button is enabled, if not then button is disabled. The difficult part is to take into consideration special keys such as delete, enter, tab, backspace.
Note: I do not want to work on the blur eventhandler of the HTML text element because it affects the tab order.
Example using jQuery. The target value is stored on the title attribute, but you could make this an ajax request, or whatever logic you need. In the following case, typing 'abc' in the text box will make the go button enabled.
HTML:
<input type="text" title="abc" id="in">
<input type="button" id="go" value="Go" disabled="disabled">
Javascript:
$("#in").keyup(function() {
if($(this).val() == $(this).attr("title")) {
$("#go").removeAttr("disabled");
}
});
JSFiddle
I'm creating a data entry app for some in-house stuff.
My team needs to enter info about "items" which can have many "categories" and vice versa.
I need a quick way to let them enter an arbitrary amount of categories.
Here's my idea:
On the item entry page, I'll have it so that initially there's one text input for "categories" and if it's tabbed out of while it's empty, the input field is deleted (unless it's the only one) and focus skips to the next field. If it's not empty when it's tabbed out of and if it's the last input field in the array, then an additional "category" text input will be added and focused.
This way people can enter an arbitrary amount of categories really quickly, without taking their hands off the keyboard, just by typing and hitting tab. Then hitting tab twice to denote the end of the list.
First of all, what do you think of this interface? Is there a better way to do it?
Second of all, is there a jQuery (or something) plugin to do this? I've searched but can't find one. I searched scriptaculous/prototype and mootools too, with no luck.
I would obviously rather use something tried and tested than roll my own.
Any and all advice appreciated
First I'll try to address the problems commented on nickf solution.
To set the focus on the newly created input $copy.find(":text").focus(); will not work. The jQuery focus method only triggers the event, but does not call the underlying focus method.
You can set the focus with setTimeout(function(){$copy.find(":text").get(0).focus()}, 10); but:
setTimeout is needed in firefox or strange things will happen with the blinking cursor.
IE7 needs another input to focus when tabbing. I haven't found the way to set the focus on an input if the focus goes to the address bar. I suppose this will not be a problem because you will need at least a submit button.
To control shift-tab I've been trying to track the focused element, in order to skip the blurHandler when the focused element is a previous input, but the resulting code is really ugly so I'll post this and look for a better solution.
And last, you're asking what we think of this UI, and I think that a comma separated list of categories is easier to code an to fill in. :-)
it's actually not too difficult to implement that, even with vanilla JS (ie: no jQuery, prototype, etc), but everything is easier with jQuery, so I'll have a go at it using that:
Assuming a structure like this:
<form id="myForm">
<div class="inputRow">
<input type="text" name="myInput[]" />
</div>
<div class="inputRow">
<input type="text" name="myInput[]" />
</div>
...
</form>
Here's the JS
$('#myForm :text').blur(onBlurHandler);
function onBlurHandler() {
$row = $(this).parent();
if ($row
.nextAll(":has(:text)") // all following divs with a text element
.length == 0 // but there aren't any, we're on the last one
) {
if ($.trim($row.find(":text").val())) { // the text box isn't empty
$copy = $row.clone(true);
$copy
.find(":text") // get the new text box,
.val('') // remove any text in it
.blur(onBlurHandler) // and add the event handler (is this necessary?)
;
$copy.insertAfter($row);
} else if ($row.prev(':has(:text)').length) { // the text box is empty, and this one isn't the first row
$row.remove(); // get rid of the row.
}
}
}
Response to comments:
thanks for the answer! i've tried it but it doesn't seem to work as intended. i'm on mac firefox. if i tab off the last field, it adds the new one but focuses the address bar. i tried adding: $copy.find(":text").focus(); after the insertAfter line, but it doesn't change anything. any ideas?
also if i shift-tab the blurhandler doesn't know i'm going in the opposite direction. is there any way around that?
Hmm, I hadn't thought about that. What you could try doing is to put an element after all your text fields which can take focus (like a textbox which is rendered off-screen, eg: margin-left: -10000px). Add an onfocus handler onto that to see if the last row is empty, and if it is, then it would have been added just then by the onBlurHandler function, so pass the focus back to the last row. If the last row isn't empty, then pass the focus onto the next element (your submit button, probably). If there are issues with the last row not existing in the DOM yet, then put the above into a timeout.
(If this actually works) this should let your users tab backwards and forwards without hassle.