I am doing a task that display cafes around a location by using zipcode.
If we enter zipcode in a text field.it will get all cafes and display in a alert box.
Problem is if we enter zipcode and press enter cursor is presenting in background text field and if we enter any thing it is typed in that text field.
I think you want to remove the focus which is set to text box.
For that, you can have jquery blur() method.
To disable auto-focus on a particular element, pass the element id as below,
$(function(){
$('#someid').blur();
});
Related
Problem - Watch for active input boxes in a page and trigger events if specific words are entered into the input box
Steps
Click 'reply or reply all'
Input box becomes active
Enter |intro
|intro text gets replaced with long form version. The |intro is like a snippet or short code
Heres what I'm thinking
Query all input boxes on a page
Check for input with focus
Add event listener on input to check for keyup events
Conditional statement to check if string contains specific snippet/short code
If condition is met then replace snippet with long form text
What do you think of my approach to this functonality
So basically I have a text field, with the following Elements.
// The element locators for the text box are as follows:
type="text" name="custom_version_ui" value="" id="custom_version_ui" placeholder="" class="custom form-control form-control-full "
I want to auto-fill the text box for "custom_version_ui" with a specific value. This text box is present in a pop and doesn't come during page loading. (It comes once I click on the Add result button on the page which renders the pop-up).
The URL of the page doesnt change when we click on the 'Add Result' button. Is there a way to auto-fill such fields?
A possible solutions would be to use setInterval to search for the field from the moment you open the page and fill it, if the field is found:
var getElem = setInterval(()=>{
var elem = document.querySelector("#custom_version_ui");
if (elem){
elem.placeholder = "specific value";
clearInterval(getElem);
}
},500);
Another option would be, to add an eventListener to the Add result button and (possibly with a slight delay) auto-fill the text box.
A website I'm accessing utilizes a javascript code editor (code mirror) attached to a textarea box. This results in a div-style input box. How do I use casperjs to enter text into the box?
I've already tried entering text into the hidden textarea using sendkeys and it doesn't find the selector (because it is hidden).
Update:
this.evaluate(function(input) {
window.$('.CodeMirror')[0].CodeMirror.setValue(input);
}, intent_schema);
enters the text into the box as expected, but when I submit the form, the values aren't saved. Something isn't firing properly.
Thanks!
I setup a simple jsfiddle page to display what I am looking to do.
<input title="I want this message to display whatever text is in the input field."></input>
When you hover over the input field then the title is displayed: "I want this message to display whatever text is in the input field."
I want this hover message to display whatever the user has entered into the actual input field.
So if a user has entered https://stackoverflow.com/ into the input field, I want the hover message (title) to display https://stackoverflow.com/
http://jsfiddle.net/FmNg7/
You could to this with jQuery:
$("input").on("change", function (e) {
$(e.currentTarget).prop("title", $(e.currentTarget).val());
});
This code snippet binds an eventhandler to the "change" event of all your inputs and then sets the title property of the changed input to its current value.
You could also bind to the keyup event instead of the change event, so the title is immediatley changed while the user types.
So I am building an input field with an auto-suggest box that suggests content based on the user's partial input into the field. Kinda like the tags box on stack. The auto-suggest box is absolutely positioned directly below the input field and only appears once the user begins to type text.
I want to make the box disappear when the input field is blurred, that is, when the user clicks anywhere else on the site. Normally, I would just use jquery's blur() function to hide the auto-suggest box. The problem is that if I do it this way, the user won't be able to select anything from the auto-suggest box because that would blur the input field and hide the auto-suggest box. I need to find a way to hide the auto suggest box if the user clicks anywhere except for the input field or the auto suggest box. Any ideas how I could set that up using jquery?
Imagine it is setup something like this:
<div id="auto_suggest">
<ul>
<li>Jane</li>
<li>john</li>
</ul>
</div>
<input type="text">
Use a timeout.
$("input, #auto_suggest, #auto_suggest a").blur(function() {
$('#auto_suggest').addClass('hiding');
setTimeout(function(){
$('#auto_suggest.hiding').hide();
},1000);
}).focus(function() {
$('#auto_suggest').removeClass('hiding').show();
});
$('#auto_suggest, #auto_suggest a').focus(function() {
$('#auto_suggest').removeClass('hiding').show();
});
Updated to work well with tabs or clicks:
http://jsfiddle.net/iambriansreed/vUeeT/