I'm new to JS and trying to make an input field that that only appears when the user types anywhere on the page. Currently, the appearing of the input field works but once it's visible, the user still has to click into the field to type in it.
I would like it to work like:
User presses "S"
Field appears with "S" typed in it.
Any help would be much appreciated!
http://codepen.io/jeremypbeasley/pen/RNrore
var searchArea = $(".search");
searchArea.hide();
$(document).ready(function() {
$( "body" ).keydown(function() {
searchArea.show();
searchArea.elements['input'].focus();
console.log("worked!");
});
});
What is searchArea.elements['input'] supposed to do ?
Try it like this instead, using jQuery's find method
$( "body" ).on('keydown', function() {
searchArea.show().find('input').focus();
});
PEN
You need to find the input element within the seach area, then call focus() on it:
$(document).ready(function() {
var $searchArea = $(".search").hide();
$("body").keydown(function() {
$searchArea.show();
$searchArea.find('input').focus();
});
});
Updated CodePen
Or just set id to input field (<input autofocus="autofocus" id="hid_inp" >)
and use $("#hid_inp").focus(); instead of searchArea.elements['input'].focus();"
Related
I have a page that is generated dynamically and all the tabindex's are preset. What I am attempting to do is to have the focus set to a specific tabindex when another input loses focus. For example if I have <input tabindex=119> and another with <input tabindex=16> how can I get to tabindex=16 when 119 loses focus? I have tried
$(zip).keydown(function(event) {
if (event.which == 9) {
event.preventDefault();
//$('#DublinTheme_wt213_block_wtMainContent_WebPatterns_wt50_block_wtPanelContent_WebPatterns_wt191_block_wtColumn1_wtVendors_EmailAddress').focus();
$('input').find("[tabindex=16]").focus();
}
});
where zip is the input field id of tabindex = 119. This did nothing at all for me. I have also tried just setting the focus to the id of the input I want:
$('#DublinTheme_wt213_block_wtMainContent_WebPatterns_wt50_block_wtPanelContent_WebPatterns_wt191_block_wtColumn1_wtVendors_EmailAddress').focus();
put in the place of $('input').find("[tabindex=16]").focus();
again, this did not place the focus on the correct input.
Any help here would be greatly appreciated.
You shouldn't put Outsystems generated id's hardcoded in your script. Create a new expression like in the example below. The blur event will be executed when an element loses focus.
Obviously replace the yourOutsystemsTabIndex199Element and yourOutsystemsTabIndex16Element with the name of your inputs.
Also set the expression so it doesn't escape content.
"<script>
$(document).ready(function(){
$('#" + yourOutsystemsTabIndex199Element.id + "').on('blur', function(){
$('#" + yourOutsystemsTabIndex16Element.id + "').focus();
});
});
</script>"
I want a text input selected (as if I had clicked on) when I click on another element on the page. I can't figure out how to do it?
You are looking for this: pure js way
<img src="http://placehold.it/350x150"
onclick="document.getElementById('target').focus(); return false;">
<input type ="text" id="target"/>
Clicking on image will set focus on the text field.
Assuming that your input field has id #input then solution would be
// Wrapper function needed to ensure that DOM elements have been already rendered.
(function() {
$( '#input' ).focus(); // jQuery
document.getElementByID( 'input' ).focus(); // VanillaJS
})();
Try this. I have not tried it though. It's worth noting that it is based on jquery.
//set focus by default
$("your_input").focus();
//if the focus is lost set it again
$("div").focusout(function(){
$("your_input").focus();
});
I know if I want to change the value of an input on a form according to what a user types into another input using:
$('#inputName').change(function() {
$('#inputURL').val($('#inputName').val());
});
But I'd like to have it so when someone types into the input it updates a Div with the text instead. IE they type into #inputName and this happens:
<div id="personsName"> text appears here as they type</div>
How'd I go about doing that? I doesn't work when I change #inputURL into #personsName :(
The change event is only triggered when leaving the textfield, so use keypress instead if you really want to "update the text on typing into a text field". .val only applies to form elements which actually have a value (e.g. <input> and <textarea> elements). In all other cases, you need the text method for modifying the text .
$("#inputName").keypress(function () {
$("#personName").text(this.value);
});
You can test this code here: http://jsfiddle.net/ntBnA/
You're almost there:
$('#inputName').change(function() {
$('#personsName').text($('#inputName').val());
});
//Cache this bad boy, its being repeatedly used!
var personsName = $('#personsName');
$('#inputName').bind({
keyup: function () {
//This is what you want.
personsName.text($(this).val());
},
change: function () {
//This is what you were doing. See the difference?
$('#inputURL').val($(this).val());
}
});
I have a form (just one field) which I am populating with some data. I would like to get me Div container populated with the data I put there in a real time. So no refresh, after I type in some text in the form field, I get it in the div as well. Does anybody know how to do it? JQuery, AJAX?Any advice appreciated.
var div = $('div')[0];
$('input').bind('keyup change', function() {
div.innerHTML = this.value;
});
Try it out: http://jsfiddle.net/H6P2z/
Of course you should make the selectors specific to your actual elements.
With jQuery you can do this very easily:
$('#textFieldId').bind('change', function (event, previousText) {
$('#divId').html($(this).val());
});
You could bind an onkeyup event to the input field. When the event fires, you can grab the contents of the field and do what you want with it.
This might look like this:
$(selector).keyup(function(e) {
// find the value of the field
var text = $(this).val();
// do something with it
$(yourDivSelector).html(text);
});
I am using jquery autocomplete combobox
and everything is ok. But I also want to set specific value through JavaScript like $("#value").val("somevalue") and it set to select element, but no changes in input element with autocomplete.
Of course, I can select this input and set value directly, but is it some other ways to do that? I try set bind to this.element like this.element.bind("change", function(){alert(1)}) but it was no effects. And I don't know why.
Edit
I found a workaround for this case. But I don't like it. I have added the following code to _create function for ui.combobox
this.element.bind("change", function() {
input.val( $(select).find("option:selected").text());
});
And when I need to change the value I can use $("#selector").val("specificvalue").trigger("change");
Is this demo what you are looking for?
The link sets the value of the jQuery UI autocomplete to Java. The focus is left on the input so that the normal keyboard events can be used to navigate the options.
Edit: How about adding another function to the combobox like this:
autocomplete : function(value) {
this.element.val(value);
this.input.val(value);
}
and calling it with the value you want to set:
$('#combobox').combobox('autocomplete', 'Java');
Updated demo
I cannot find any available existing function to do what you want, but this seems to work nicely for me. Hope it is closer to the behaviour you require.
I managed a quick and dirty way of setting the value. But, you do need to know both the value and the text of the item that you want to display on the dropdown.
var myValue = foo; // value that you want selected
var myText = bar; // text that you want to display
// You first need to set the value of the (hidden) select list
$('#myCombo').val(myValue);
// ...then you need to set the display text of the actual autocomplete box.
$('#myCombo').siblings('.ui-combobox').find('.ui-autocomplete-input').val(myText);
#andyb,
i think rewrite:
autocomplete: function (value) {
this.element.val(value);
var selected = this.element.children(":selected"),
value = selected.val() ? selected.text() : "";
this.input.val(value);
}
I really like what andyb did, but I needed it to do a little more around event handling to be able to handle triggering the a change event because "selected" doesn't handle when hitting enter or losing focus on the input (hitting tab or mouse click).
As such, using what andyb did as a base as well as the latest version of the jQuery Autocomplete script, I created the following solution: DEMO
Enter: Chooses the first item if menu is visible
Focus Lost: Partial match triggers not found message and clears entry (jQuery UI), but fully typed answer "selects" that value (not case sensative)
How Change method can be utlized:
$("#combobox").combobox({
selected: function (event, ui) {
$("#output").text("Selected Event >>> " + $("#combobox").val());
}
})
.change(function (e) {
$("#output").text("Change Event >>> " + $("#combobox").val());
});
Hopefully this helps others who need additional change event functionality to compensate for gaps that "selected" leaves open.
http://jsfiddle.net/nhJDd/
$(".document").ready(function(){
$("select option:eq(1)").val("someNewVal");
$("select option:eq(1)").text("Another Val");
$("select option:eq(1)").attr('selected', 'selected');
});
here is a working example and jquery, I am assuming you want to change the value of a select, change its text face and also have it selected at page load?
#
Attempt 2:
here is another fiddle: http://jsfiddle.net/HafLW/1/ , do you mean that you select an option, then you want to append that value to the autocomplete of a input area?
$(".document").ready(function(){
someString = "this,that";
$("input").autocomplete({source: someString.split(",")});
$("select").change(function(){
alert($(this).val()+" appended");
someString = someString+","+$(this).val();
$("input").autocomplete({source: someString.split(",")});
});
});