I'm currently working on a project fiddling with animations on select and was creating a signup form (re-created it on my replit - https://replit.com/join/gzflphmalc-jeezgeorge
)
Everything seems to be working fine except for the fact that when I click on the name of the label (name, email, password) it doesn't initiate the text input.
How can I wrap the label with the input so that when I click on the name as well it will initiate the input.
Thanks in advance. :)
I don't have a Replit account so I can't see your project. But if I understand your question, you can use id and for HTML attributes for that:
<label for="name">First Name</label>
<input id="name" type="text" placeholder="e.g. John Doe" />
Once you click on the label First Name, it will focus on the text input.
Related
I have an input with type=password which I want to show stars like an input with type=text.
<input type="password" name=""/>
My purpose is to click on the input box when calling the input password when the keyboard, using a lot of methods can not be achieved, so I would like to try this way.
Prepare CSS for showing Password stars like normal stars.
look into this given reference CSS script .i think it will help.
I have the following code :
<input type="text" id="productCode" name="productCode" style="min-height: 42px;" onChange="ajaxrequest_provideProductListOnHit('protected/snippet/snippet_provideProductListOnHit.php', 'ajaxOnProductHit'); return false;" required="required" autofocus />
The problem is that :
The autofocus is not working, I'm using it in this input box only.
Actually the purpose of this input box is to get the field autofocussed so that a barcode scanner could input the productCode.
Now as you can see, my onChange event handler is not going to work here since the barcode scanner apart from the product code, inputs too.
So I need a solution here which autofocuses and once the barcode scanner inputs value in the field, calls for the mentioned ajax function.
html:
<input type="text" id="productCode" name="productCode" style="min-height: 42px;" required="required" autofocus />
js:
var pc = document.getElementById('productCode');
pc.onblur = function () {
ajaxrequest_provideProductListOnHit(
'protected/snippet/snippet_provideProductListOnHit.php',
'ajaxOnProductHit'
);
}
pc.focus();
i use onblur, because onchange would trigger after EVERY change you make (e.g. typing into the text-field will trigger after every key).
you could also provide some custom-logic, e.g. recognize a certain length
Yes you where right, the problem was that I was using autofocus on a different preceding form field which made this particular field of this particular form non-autofocus. So I learned that in a page with multiple forms loaded in to the DOM, only the first one with auto-focus will work. Fool of me to think otherwise.
I've created a search page that can be toggled between french and english. So when the user searches a record and toggles to french it displays the same record they were viewing on the english page.
What I want to do is display the record name in the search box when the page is toggled.I assumed it was as simple as doing a $('#inputID').val(record); but it doesn't seem to be working. I've alerted the record name and it works fine, so I'm stumped. All the scripts are linked correctly as well so that's not the problem.
Autocomplete Box Code
<div id="ui-widgit">
<label for="searchParams">
<h1>Search All Programs (By Screen Number or By Error Code):</h1>
</label>
<input type="text" id="inputID" name="inputID" value="" class="ipt_Design" style="width:255px;" />
<input type="button" value="Search" name="searchBtn" class="btn_Design" onclick="showSearch(inputID.value)"/>
</div>
Try to change the value of inputID with this
$('#inputID').val(recordToggle);
also have tried this:
$('#inputID input').val(recordToggle);
It is hard to tell with your presented markup but I am assuming you are trying to change the value of $('#inputID') after the page refreshed. It is important where you put this code. If it is placed before <input type="text" id="inputID" name="inputID" value="" class="ipt_Design" style="width:255px;" /> you will not return anything with $('#inputID') so you will change the value of nothing to your text. It will give no error. To fix this you can use:
$( document ).ready(function(){
$('#inputID').val(recordToggle);
});
Be sure to read about jQuery's ready function because load may be the better choice.
If this doesn't fix your problem let me know. I will update my answer.
For example, on some sites in the username form box it says something like "username" and then when you click there the "username" disappears so you can type your username.
Thanks.
Yes, you can do this in a form.
Username =forms.CharField(max_length=35,
required=True,
widget=forms.TextInput(attrs={'placeholder': 'Username'}))
Check out the Django Docs for more on how to customize HTML from Django Forms.
You need to use html for that:
<input type="text" placeholder="This text will disappear" />
I have following HTML code. writer input field is text filed. but I want to pretend that one is password field. whenever someone type anything, one key will display as * only, as you know how password field show; additionally the entry at writer input field should be populate in holder value which field is hidden. Can you please write in simple java script coding.
Password: <input type="text" id="writer" value=""/><input type="hidden" id="holder" value=""/>
This one show http://www.symplik.com/password.html, whatever we enter, it doesn't look good, it should be all * only when you start typing in it.
Simply use <input type="password" id="txtPassord" value=""/>