Develop Reference

How to set focus on text box whenever it appears on the screen

I've made a web application That starts from a specific amount and every time a donation is made it counts down and shows how much is needed. And at one time I might have about 10-20 of these counting down and I am always creating new ones. Now when I am doing that it would be nice that when I click the button it automatically focuses on the text field for ease of use. however I can't quite get that to work.
The window to set the countdown is shown using angularjs dialogs/modals. This means that when I click the a button it writes code onto the page that shows the dialog/modal and when I submit it it is removed from the page completely.
The first time around when I click the button it focuses on the text box and I can type the number and press enter and it's submitted, now I want to create a new one. I click the button, up comes the modal but now I have to grab the mouse, move it to the input and click it. Waste of time and not user friendly.
What I'm asking is for a way to have it focus on the text field when using modals every time I click the button.
here's the window:
<form name="formCountdown" novalidate class="css-form">
<div modal="showCountdownModal" close="showCountdownModal = false" options="opts" ng-cloak>
<div class="modal-header">
<h4>Enter Countdown Amount</h4>
</div>
<div class="modal-body">
<input id="focusbox" type="number" min="1" autofocus required ng-model="countDownAmount" name="countDownAmount" ui-keypress="{13:'setCountdown()'}" select-on-focus />
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-primary cancel" ng-disabled="formCountdown.$invalid" ng-click="setCountdown()">Set</button>
</div>
</div>
</form>
I've tried using autofocus, and that works fine the first time you press the button after loading the page. but the second and up it does not.
I've also tried using this jquery code with no luck:
<script>
$("#focusbtn").click(function() {
$("#focusbox").focus();
});
</script>
And now I am completely lost and would really love it if someone could help me out here.

Edit: forgot to put in the timeout, to make sure the browser is ready!
add the following line to your setCountDown() function:
$timeout(function (){
document.querySelector('#focusbox').focus();
},0)
You need to inject the $timeout in your controller
That will probably do the trick!
However, this will work, but dom manipulation should be done in a directive!

I copied your posted code together with the script and it works just fine. I'm not sure if I understood the problem but the autofocus works well in my end. Autofocus is present after the page has loaded or refreshed and even after the button has been clicked. Of course the autofocus will be removed if a click outside the input text has been triggered.
Morever, I think Autofocus is an attribute by HTML5. You might want to include in your HTML or maybe it is just a browser compatibility issue.
You can test or check if autofocus is supported by your browser at http://html5test.com/.
Hope this help somehow.
EDIT:
Try this on your script.
$(document).ready(function() {
$(".modalName").on('shown', function() {
$(this).find("[autofocus]:first").focus();
});
});

IDs not being recognized when placed in modals

I am creating a registration form where its contents are contained in DIV (hidden), then when the user clicks a button, the modal shows and the content is loaded through the ID of the DIV.
However, I am encountering a problem where the button of the DIV is not recognized in my script. I assigned a click event using jquery, but it doesn't work. Probably because the hidden DIV has conflicts with the DIV create in the modal (which will eventually have the same IDs).
Here is my script:
$('#addCollege').click(function(e){
modal.open({content: $('#addCollegeForm').html()});
e.preventDefault();`
});
This is the DIV
<div id="addCollegeForm" style="display:none">
<label>College:</label><br>
<input type="text" placeholder = "Enter college name here..." id = "collegeDescription" > <br>
<input type="button" value="Save" id= "addCollege">
</div>
Thanks and I appreciate your help.

I wrote a dialog plugin for bootstrap, and got a similar problem.
I want to pop up an existing dom element.
Here is solution:
$targetElement.detach().appendTo($window.find('.modal-body')) // $targetElement is an existing dom
Detach element and append it to container.
Don't forget to revert the element to old container.
Hope it helps.
Regards

Try moving the button that opens your dialog out of the dialog:
EDIT - something like this should work...
HTML...
<div id="addCollegeForm">things in your dialog</div>
<input type="button" value="open dialog" id="addCollege">
jquery...
$("#addCollegeForm").dialog({
autoOpen: false
});
$('#addCollege').click(function () {
$("#addCollegeForm").dialog("open");
});
http://jsfiddle.net/DTq6m/
http://api.jqueryui.com/dialog/#option-autoOpen

css put button within form after other block

I have such html code:
<div class="actions">
<input id="submit-car" name="commit" type="submit" value="Добавить объявление">
</div>
and fiddle:
http://jsfiddle.net/348U4/
as you can see i have submit button "Добавить объявление" in form... But how can i set it within form, after .car-photo block?
I have some ideas:
put absolute position: but so, i didn't know height of .car-photo and could have button on block car-photo
i add second submit after car-photo and put js, which click on hidden normal submin in form - but have some troubles in IE.
How could i normally do this thing? How to view button within form, which work's?

You could move car-photo into the form.
See fiddle: http://jsfiddle.net/348U4/1/

As I correctly understand. You need using tag <button> It can be used within the form tag

Triggering file select window from a different place [duplicate]

This question already has answers here:
jQuery trigger file input
(21 answers)
Closed 8 years ago.
I have a HTML form like this one:
<style>.hidden { display: none; }</style>
<form method="post" action="upload">
<div id="dropzone" class="pre-upload">
<div class="comp">
<h1>Drop your images here</h1>
<p>or simply click to select them.</p>
<input type="file" name="images" id="upload_button" class="hidden" />
</div>
<div class="fing">
<p>Tap to select your images</p>
</div>
</div><!-- Pre upload div -->
</form>
I want to make #dropzone open up the standard file selecting window if it's clicked. It should open up #upload_button's file selector specifically.
I've tried the following, but it didn't work:
$('#dropzone').click(function(){
$('#upload_button').click();
});
As you see, I'm trying to achieve this result via jQuery.
I thought this would trigger the window, but it's simply doing nothing.
# The ones who are voting to close this down:
As you see, my issue was totally not answered in the other question you are linking to. This was a different issue with nesting my input wrongly. So, before going and blindly voting for a close, better check the provided code and try to see if the issue is somewhat different from the common. This is a site for help after all.

It looks like a circular reference problem. Your file upload button is inside the div you want to click to trigger the button. Triggering the click on the button from the div, also triggers the click on the div, so it infinitely recurses.
If you watch the console, you'll see you get a "Maximum call stack size exceeded" error.
Moving the button outside of the div you want to click causes it to function as intended.
Here's a jsfiddle to demonstrate the problem.

Show Interactive Html elements on top of an anchor tag

I have a area surrounded by an anchor tag and it should be directed to anchor tag href wherever user clicks on that area. And also that area should contain a textbox and button control which should allow user to type some text and submit. The problem is when I click on the textbox or button it does a redirect to the page given in anchor tag.
<a href="http://stackoverflow.com/">
<div style="border:1px solid grey;width:300px;height:100px;">
<div style="">Title</div>
<div>
<input type="text" name="name">
<button type="button" onclick="alert('button clicked');">Click Me!</button>
</div>
</div>
</a>
Please refer this jsfiddle.
I have created a simplified problem here.
However I found a solution for this by giving negative margin-top values. It is working but I am interested in a better solution. Because this solution is not scalable since the button and textbox are not inside the content div.
Each of these sections represent a item in a search result. When a user click on a search item it would navigate to single item page. At the same time users should be able to edit content from search results view by selecting edit option. When they select edit, a textbox and a button to submit should appear.

Unfortunately the HTML5 spec says about the <a> element:
Content model:
Transparent, but there must be no interactive content descendant.
What that means is, an <a> element is allowed to contain any elements that its parent is allowed to contain, except for things like <button>.
You'll need to find a way to get your <button> and <input> working outside of the <a>

Use this
<input type="text" name="name" onclick="return false;" />
Use this only if you don't want to change your markup.
The best solution is go with the semantics of HTML and style it. This way is not correct as Gareth pointed out.
In the case of your button
<button type="button" onclick="buttonClick(event);">Click Me!</button>
function buttonClick(e) {
alert('button clicked');
e.preventDefault();
}

Introduce a onclick for textfield and use stoppropagation method for a event. for ex ,
textfield.onclick = function(e) {
e.stopPropagation();
}
Another alternate is to use <div onclick="function()"> instead of <a> tag for what you think to achieve