I have an input field. When I click on this input field and write something then it will show all the suggested words that I want.
Like: If I write 'c' then it will show suggested words that i declared 'C#','Code','C++'
HTML:
<input type="text" class="input_field" />
How can I do it using JavaScript? Thank you.
Please refer for the auto complete http://jqueryui.com/autocomplete/
You may try following. It is my favourite at least.
Twitter Typeahead JS
Related
I have a search input tag that is being added by a jQuery plug-in:
<input type="search" />
Note that this does not have an ID, CLASS, or NAME. I need the search input tag to look like this:
<input type="search" name="myname" />
A simple solution is for me to update the jQuery plug-in. However, I do not want to do this as it will cause challenges when I upgrade this plug-in in the future.
This JavaScript works properly and adds the name attribute:
$(document).ready(function() {
document.getElementsByTagName("input")[0].setAttribute("name", "myname");
});
The problem is that the "[0]" in this function relies on the search input being the first input field in the form. I do not think this solution is sustainable.
There are other inputs in the form. This is the only one with the type attribute equal to "search." Is there a way to identify it by this attribute? Or, is there another solution you propose?
Thank you for your time!
You can use the document.querySelector:
document.querySelector("input[type='search']")
Below is an example (you can inspect the output to see name attribute):
document.querySelector("input[type=search]").setAttribute("name", "myname");
<input type="search" value="foo" />
<input type="bar" value="bar" />
You can target a selection by anything. So, the selector input[type="search"]' will work.
If you want to apply this to all input's of type search, this is good enough, and you get all of them in here:
$('input[type="search"]')
This works without jQuery too:
document.querySelectorAll('input[type="search"]')
A more targeted approach would be
document.querySelectorAll('div.filter input[type="search"]')
What is the best way to escape HTML in the input field? For example, I've search input field
<input id="search" type="text" ng-model="search" placeholder="search...">
And I want to escape if somebody types something like this:
<script>alert("test123");</script>
this completely depends on your use case. If you just want it to escape it for the users view (so basically sanitizing) you can use angular $sanitize & $sce for it
https://docs.angularjs.org/api/ngSanitize/service/$sanitize and https://docs.angularjs.org/api/ng/service/$sce
however if you want to store it somewhere and want it escaped, you can build a filter. You can find an example here: Escape HTML text in an AngularJS directive
You could use lodash _.escape([string='']). This is a easy and simple solution.
_.escape($scope.search);
You could use pattern for your input box like -
<input type='text' pattern='[a-zA-Z0-9]+'>
Use an expression that best suits your needs.
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'm using MaskedPassword.js to mask a password field in my form as demonstrated below:
<input type="password" id="pwd" name="pwd" autocomplete="off">
<script type="text/javascript">
new MaskedPassword(document.getElementById("pwd"), '\u25CF');
</script>
I'm trying to retrieve the plain text value of this password field using Javascript but unable to do so.
I've already tried the following:
document.getElementById("pwd").value
document.getElementById("pwd").text
document.getElementById("pwd").defaultValue
document.getElementById("pwd").innerHTML
Can anyone help me get the actual value?
Assuming you are using a version of the code in this post (possibly this implementation), I believe you would find it in the hidden field that is generated by the code, like so:
document.getElementById('pwd-unmasked').value
After struggling a couple of hours, I finally found out the following fix that worked for me:
document.getElementById('pwd')._realfield.value
Posting it here might help someone else.
I have a long long long form. It has about 200 fields. Now, about 50 fields need to be validated through JavaScript / jQuery. How can I easily validate them without a huge amount of code. I want to avoid doing this:
field1 = document.getElementById("field1").value;
if (field1 == '') {
alert ("Please enter a value for Field1");
return false
}
Is there an easier way? Thanks a lot.
Use the jquery Form validation plugin and assign the correct classes to the fields.
It's as simple as class="required" in most cases!
If you just want to check if the field is empty or not you could do something like this using jQuery:
HTML:
<form>
<input class="validate" type="text" />
<input type="text" />
<input class="validate" type="text" />
<input type="text" />
<input class="validate" type="text" />
</form>
SCRIPT:
$('.validate').each(function() { //this will get every input marked with class "validate"
if ($(this).val() == '')
return false;
});
Using JQuery validate plugin can be much help. You can control the way plugin works from your HTML code and even not write any javascript! If you need more complex validatio, you can extend it by adding specific validation functions. It allows you to localize the application as well.
This page gives a good example on how to use the plugin: http://jquery.bassistance.de/validate/demo/milk/ (click the "Show script used on this page" link).
Here is a rudimentary fiddle, that you can use to validate your form, Just add a span after each of the fields that you need to validate.
http://jsfiddle.net/refhat/h2S6G/35/
I thought about this too, but the plugin can be a bit difficult to
use. Do you know if it allows to display an alert box when an error is
found, instead of the actual displaying on the page? That's a bit too
much for this form. Thanks a lot
Here's a validator I wrote that uses a pop-up style alert box for error messages. Is that the sort of thing you are after?
http://validator.codeplex.com/
Do you want default error messages like for required validator? Regarding jquery validate plugin was it the syntax it offers to place validation information in the method call you found difficult since for a large form having validation information located separately from the text boxes makes it harder to go through and verify all fields have the right validators and messages?