HTML5 comes with a lot of new types for
<input />
How can I detect if an input field is "a text field" (date, time, email, text, everything)
I do not want to write input[type='text'],input[type='xxx'] ...
You can use getAttribute to get whatever attribute you want (this includes type)
var input = document.getElementById('myinput');
var inputTYpe = input.getAttribute('type');
var isText = inputTYpe === 'text' || inputTYpe === '';
console.log('type is ', input.getAttribute('type'), ' is text = ', isText)
<input type="hey" id="myinput" />
CSS3 comes with a lot of new types for <input />
HTML5, not CSS3.
I do not want to write input[type='text'],input[type='xxx']
Unfortunately, I don't think you get a choice. But since the vast majority of them are text-like, you probably want to just call out the ones that aren't (like range, checkbox, radio, file, submit, image, reset, button — only one of which is new with HTML5).
Where possible, you'll want to isolate that to a single spot. You've mentioned CSS, which may make it difficult, but for instance if you were doing this in JavaScript, you'd want a single reusable function so you could update it as necessary.
function unameit(el) {
var words=['button','checkbox','hidden','image','radio','range','reset','submit'],tp=el.type.toLowerCase();
return words.indexOf(tp)<0;
}
If you want to differenciate between tags, you can check the tag by using
elementTag.tagName
For example, if you have a Input, you will get the text "INPUT"
And if you want to know what kind of imput is being used, you can check by looking at the attribute
elementTag.type
Related
I have simple input on my html and i want to when user putting text value in the input value was automatically set by my regex pattern
Example: I have time picker input
and I want the user when he enters numbers, the value is automatically formatted in the input.
How to do it with regex and replace function ?
I tried to do it this way, but in the end I just get the string that I enter.
console.log(value.replace(/^(([0-9]{1})|([0-1]{1}[0-9]{1})|([2]{1}[0-3]{1}))(([:]{1})?)(([0-5]{1}[0-9]?)?)$/g, ''));
If you are using a UI framework, refer to their documentation they would probably have a plugin to do it for you. Or if you want to do it on your own:
From the HTML side you can use type="time" attribute (please check the browser support for this).
And from JavaScript you can use something like ^([01]\d|2[0-3]):?([0-5]\d)$ on form submission for example.
const TIME_REGEX = /([01]\d|2[0-3]):?([0-5]\d)$/;
const myTimeElm = document.getElementById('myTime');
const outputElm = document.getElementById('output');
let timer;
outputElm.addEventListener('click', () => {
if (TIME_REGEX.test(myTimeElm.value)) {
outputElm.innerText = myTimeElm.value;
} else {
outputElm.innerText = "Error!"
}
});
#output {
cursor: pointer;
}
<input type="time" id="myTime" value="00:00">
<span id="output">click here!</span>
If you don't want to use HTML's type="time", consider using a mask for your input where you record the user's input and render the formatted output in a different component.
Since using the RegEx alone won't achieve the same user experience as you may want to workout the input's cursor position.
Or simple use a library that does that for you (Cleave.js for example)
I have a web site that will get an input value from a bar code reader. I need to keep the input field focus until it gets the value. I used <input onBlur="this.focus()"> and some variations using functions, but won't work. I'd prefer not using jQuery, but it's not mandatory.
What you want to do might be perfectly fine in your specific use case, but please don't do this if it isn't really, absolutely necessary. It is very annoying, if users can't control the focus anymore. Having said that, you could do it like this:
<input onBlur="if (this.value == '') { var field = this; setTimeout(function() { field.focus(); }, 0); }" type="text">
You probably should put this in a separate function.
I am doing some website where I have a login form. I know people can save their usernames and passwords on these in their web browsers.
I need to show / hide a label (<label></label>). if the field is empty then the label has to appear, if there is any value in the field then the label has to hide,
but this doesn't work with the browser autocomplete, is there anyway I can track this?
I tried with:
jQuery.change();
but that doesn't work.
Is there anything I can do about this rather than turning autocomplete off?
The norm here is to use the placeholder attribute on the relevant input element:
<input type="text" placeholder="username">
username will be displayed within the input when there's no text, and hidden otherwise. If you're using this, then you should probably also use something like Modernizr to detect support and create a normal text label otherwise.
You have to manually trigger the change event:
$("#username")
.change(function () {
// do stuff on change (check for default)
})
.trigger("change");
or use some watermark library if you only want to toggle default text (or the placeholder attribute with Modernizr as aviraldg recommends).
This is very simple.
I use this for my site's text fields.
This coding is in Javascript text.
create a <form> with name and id = "comform" (you can change this later; just for reference).
create an <input type = "text" with name and id = "Message" (you can change this later; just for reference).
create a <div> with id = "ifsend" (you can change this later; just for reference).
Also create a variable to store the length in. var numbering (you can change this later; just for reference).
function counter() {
var numbering;
numbering = document.forms["comform"]["Message"].value.length;
if (numbering == 0) {
label();
}
if (numbering != 0) {
document.getElementById('ifsend').innerHTML="";
}
}
function label() {
document.getElementById('ifsend').innerHTML="Your form value is empty";
}
i have an annoying issue with watermarked text for a textbox.
what i want is if user click away of the textbox and there is no text in the textbox than the default text should appear (e.g. Search...)
i have this function to check it:
document.getElementById("searchtextbox").onblur = function() {
if (document.getElementById("searchtextbox").value == "") {
document.getElementById("searchtextbox").setAttribute("value", "Search...");
}
it works great if i just click inside and click out. the problem comes when i click inside, enter text and delete it and then click outside.
i tried doing it with Length == 0, value == null, value.trim() == "", !value.match(/.+/) and none of them return true for this case.
Please consider using the HTML5 placeholder attribute.
<input type="text" id="searchtextbox" placeholder="Search..." value="" />
As a lot of people under my answer pointed out, Internet Explorer won't be really keen on displaying your placeholder text (what a surprise). Still, it is way more semantic to use placeholder, and do a feature detection whether the browser supports it or not.
You can do feature detection like this (from diveintohtml5.ep.io):
function supports_input_placeholder() {
var i = document.createElement('input');
return 'placeholder' in i;
}
If this is false, you can use your Javascript placeholder hack.
UPDATE: If you need help how to implement in a nice way, please refer to Html placeholder text in a textarea form.
I also took a look at your code and fixed it:
jsFiddle Demo
document.getElementById("searchtextbox").onblur = function() {
if (this.value == "") {
this.value="Search...";
}
}
Using setAttribute is not the right way here, you do not want to set the attribute, but the live property (.value). Your if condition actually worked, but the change was not reflected.
As bazmegakapa suggested, consider the placeholder attribute.
To answer your question, your code isn't working because you're using setAttribute, while the user just modified the property value. Instead of using setAttribute, try using .value = 'Search...'
Using jQuery, I change the value of an input text field through some process. After the process is done, I need to capture this change and apply it to another process. My problem is that I can't seem to capture this change and assign it to a variable. I know the changes are happening because the DOM is getting updated. Furthermore, this variable assignment works in IE, but not for the other browsers I tested.
Below is a snippet to prove my point (and you can see this online here: http://jsfiddle.net/xMwAE/).
<form>
<input type="hidden" name="my_hidden" value="Hidden Field" />
<input type="text" name="my_text" value="Text Field" />
</form>
$().ready(function() {
$('input[name=my_hidden]').val('Hello Hidden Field');
$('input[name=my_text]').val('Hello Text Field');
// Display
var temp = $('form').html();
// Though the DOM is updated with the new values. The variable temp
// does not capture the changes to the input text field, but captures
// the change in the hidden field. When in IE, temp captures the
// changes in both fields.
alert(temp);
});
Obviously, I need consistent behavior across browsers. Any ideas what's going on?
I don't get any trusted idea what happens, but somehow there should be a difference between setting the value as a member (input.value) or setting the value as a attribute-node.
This works for me :
$('input[name=my_text]').each(function()
{ this.setAttribute('value','Hello Text Field');});
I guess its a bug in innerHTML, see bugzilla: https://bugzilla.mozilla.org/show_bug.cgi?id=535992
Alternatively, you can store the values of your fields into array and use however you like like this:
var data = [];
$('form :input').each(function(){
data.push(this.value);
});
Now you can check for values like this:
alert(data[0]);
alert(data[1]);