Can I replace the maxlength attribute with something in CSS?
<input type='text' id="phone_extension" maxlength="4" />
No.
maxlength is for behavior.
CSS is for styling.
That is why.
No. This needs to be done in the HTML. You could set the value with Javascript if you need to though.
You can use jQuery like:
$("input").attr("maxlength", 4)
Here is a demo: http://jsfiddle.net/TmsXG/13/
I don't think you can, and CSS is supposed to describe how the page looks not what it does, so even if you could, it's not really how you should be using it.
Perhaps you should think about using JQuery to apply common functionality to your form components?
Not with CSS, no.
Not with CSS, but you can emulate and extend / customize the desired behavior with JavaScript.
As others have answered, there is no current way to add maxlength directly to a CSS class.
However, this creative solution can achieve what you are looking for.
I have the jQuery in a file named maxLengths.js which I reference in site (site.master for ASP)
run the snippet to see it in action, works well.
jquery, css, html:
$(function () {
$(".maxLenAddress1").keypress(function (event) {
if ($(this).val().length == 5) { /* obv 5 is too small for an address field, just want to use as an example though */
return false;
} else {
return true;
}
});
});
.maxLenAddress1{} /* this is here mostly for intellisense usage, but can be altered if you like */
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<input type="text" class="maxLenAddress1" />
The advantage of using this: if it is decided the max length for this type of field needs to be pushed out or in across your entire application you can change it in one spot. Comes in handy for field lengths for things like customer codes, full name fields, email fields, any field common across your application.
Use $("input").attr("maxlength", 4)
if you're using jQuery version < 1.6
and $("input").prop("maxLength", 4)
if you are using jQuery version 1.6+.
Related
I'm writing an alarm web app. I have two number inputs, one for the hours, one for the minutes. Thus, when I use my keyboard arrows, they go from 0 to 23/59. Is there an HTML native way to make them go from 00 (01,02, et.) to 23/59 instead ?
I'm only worried about the UI aspects as my JS manages the missing 0 anyway.
EDIT - As requested :
What I have :
What I want :
Instead of going from 0,1,2 to 59, I'd like to automatically have a leading 0 when the number is smaller than 10 (00,01,02 to 59).
I use this to just prepend zeros as needed:
<script>
function leadingZeros(input) {
if(!isNaN(input.value) && input.value.length === 1) {
input.value = '0' + input.value;
}
}
</script>
And I just call that on the input's various events how ever works best for me, for instance:
<input type="number"
value="00"
onchange="leadingZeros(this)"
onkeyup="leadingZeros(this)"
onclick="leadingZeros(this)" />
It's not an ideal solution, mainly because there's a slight visual change as the user changes the number and the zero is prepended, but it works for me :)
Edit: Forgot to mention, I appreciate the answer asked for a native solution without javascript, but I wanted to provide something for people landing here through a Google search.
I'm afraid there is not native HTML way to do that unless using a Select tag. If you are using a text input you have to add the leading 0 on the 10 first values by javascript.
The correct, modern solution to OP's problem would be to use a input with type=time and then they don't have to worry about leading zeros or any of this other stuffs.
Adding on to some of the other answers that suggest using an event listener. I've tested this with jquery in chrome and it seems to work well with the padding without the slight flashing side effect.
<input type="number" id="input-element-id" value="00">
<script>
$('#input-element-id').on('input', function() {
const value = $(this).prop('value')
$(this).prop('value', value.padStart(2, '0'))
})
</script>
I am trying a simple concatenation in razor.
I get all kinds of squiqly lines when I add this in my model RAZOR:
<input type="checkbox" id="ck1-#track.TrackID"
onclick="$('#ck2-#(track.TrackID)').prop('checked', $(this).prop('checked'))" />
However it outputs perfectly OUTPUT:
<input type="checkbox"
id="ck1-500004524"
onclick="$('#ck2-500004524').prop('checked', $(this).prop('checked'))">
I am trying to get the exact html as in the output, but without all of the squigly.
I understand this is most likely covered in other posts, but I am still trying to get the grasp on the way Razor concatenates strings, it seems to be different each time I need it.
Thank you in advance,
As mentioned, Razor isn't friendly to injecting variables into html attributes. Part of the reason is that linking event handlers in Mark-up is an outdated practice.
best practice is the "Unobtrusive way"
$(function () {
$('#').click(function ()
{ $('#ck2-#(track.TrackID)').prop('checked', $(this).prop('checked')) })
})
Having #code inside of html/javascript strings e.g "#code" or '#code' will almost always give you squiggly lines.
On lines where I am mixing HTML markup & Razor syntax, I preface the line with a #: which I've found resolves a lot of issues.
Also, check out http://weblogs.asp.net/scottgu/archive/2010/12/16/asp-net-mvc-3-implicit-and-explicit-code-nuggets-with-razor.aspx
This snippet is good advice:
When necessary, you can also explicitly scope code expressions using a
#(expression) syntax to provide greater clarity around your intent, as
well as to disambiguate code statements from static markup.
Thank you for everyone that helped, one of the answers suggested that the 'unobrusive way' would be better than hardcoding javascript into the elements. Here is what I came up with:
<input type="checkbox" class="ckSelectCol" />
$(function () {
$('.ckSelectCol').each(function () {
$(this).change(function () {
dupCheckBox(this);
});
});
});
What this is doing is finding all checkboxes that have a class ckSelectCol and adding a change eventhandler, the change event handler is the function that I wish to be called on change.
This can be done a multitude of ways, I chose this way as it decouples the javascript from the page, can easily be reused and makes the page lighter.
If anyone has any suggestions, please respond.
Once again, I appreciate all of the input that I received on this post.
-Edward
is there a way to add jquery ui classes into my own css file per element, IE:
input {
ui-corner-all /* <- JQuery UI class */
}
as opposed to adding the class to every input, IE:
<input name="myinput" type="text" class="ui-corner-all" value="" />
You can check out LESS, here is a very similar question on SO Can a CSS class inherit one or more other classes?
LESS is an extension for CSS a great level of abstraction with variables, nested rules, function, operations, etc
You can use the jQuery .addClass method to add a class to elements at any time, including page load, such as:
$(function() {
$(input).addClass('ui-corner-all');
});
This would add the ui-corner-all class to every input element in the html when the page loads. If you would like to select only certain elements on the page, use a more specific selection, such as:
$(function() {
$('#myInput').addClass('ui-corner-all');
});
This will add the ui-corner-all class to all of the elements on the page that have the ID of myInput.
You might want to look into checking out Sass. This will give you the option to extend css classes to your own classes via #extend.
This is a handy Sass + Compass video
Then after you can do this
This way, you don't have to depend on javascript to add classes. It's all done through css.
Hope this helps!
You could also use a preprocessor like LESS to achieve this. You would have to save your ui.css as ui.less and then you could do something like this:
#import url(ui.less);
input {
.ui-corner-all;
}
After compilation of your less to css, it would take all the styles of the ui-corners-all class and apply them to your inputs. And that is just one of the many advantages of using a css preprocessor. It is really worth looking into and is not very hard to learn if you are familiar with css. You can find more info here: http://lesscss.org/
What is it called or where can I find code for placing a 'suggestion' or grayed out text in a form field box that doesn't get pass as a value. I know i can prepopulate it, but want to use it to only provide guidance. Example, box that says " "
The terminology you're referring to is called a watermark.
There are many existing Javascript solutions written for this already, like this one.
JavaScript will do this. I've used the jQuery framework, for example:
Setting the value:
$('#comment_box').val('Optional comment..');
On click, removing the value:
$('#comment_box').val('');
On submit:
if (comment == 'Optional comment..'){
comment = '';
}
And submit your comment. I've left out the functions here but you can get an idea.
HTML5 has a placeholder attribute supported by many modern browsers.
(But alas not MSIE.)
The above-linked article explains how to test for support and implement a javascript fallback.
use
<input type=text disabled value='...'/>
(disabled wont pass the values, whereas readonly will pass the value)
I think what you are referring to is a watermark
http://www.asp.net/ajax/ajaxcontroltoolkit/Samples/TextBoxWatermark/TextBoxWatermark.aspx
or
there are jquery defaultvalue plugins
I don't know if it has been asked before, couldn't find it either.
Is it possible to control the type of the input text that is rendered by an asp:TextBox? I would like to change it to <input type="date">
any suggestions or comments are welcome, thanks
There is an update for .NET framework 4 which allows you to specify the type attribute
http://support.microsoft.com/kb/2468871.
See feature 3 way down the page
Feature 3
New syntax lets you define a
TextBox control that is HTML5
compatible. For example, the following
code defines a TextBox control that is
HTML5 compatible:
<asp:TextBox runat="server" type="some-HTML5-type" />
If you don't mind subclassing, you can do this by overidding AddAttributesToRender
public class DateTextbox : System.Web.UI.WebControls.TextBox
{
protected override void AddAttributesToRender(System.Web.UI.HtmlTextWriter writer)
{
writer.AddAttribute("type", "date");
base.AddAttributesToRender(writer);
}
}
Here is how I did it... hope it helps...
Add a new item to your project of the type "JScript File", then paste this code in:
var setNewType;
if (!setNewType) {
setNewType = window.onload = function() {
var a = document.getElementsByTagName('input');
for (var i = 0; i < a.length; i++) {
if (a[i].getAttribute('xtype')) {
a[i].setAttribute('type', a[i].getAttribute('xtype'));
a[i].removeAttribute('xtype');
};
}
}
Now add this line into your aspx page after the body tag (change the file name to whatever you called it above!):
<script type="text/javascript" src="setNewType.js"></script>
Finally, add something like the following to your code behind PageLoad ( I used VB here):
aspTxtBxId.Attributes("xtype") = "tel" ' or whatever you want it to be
The important part above is the Attributes.("xtype"), as it places the attribute XTYPE in the rendered html for the "textbox", which the javascript then finds and uses to replace the original "type" attribute.
Good Luck!
FJF
I know this question is old, but I was having the same issue in a Web Forms application. You need to use TextMode
While the documentation states that
Use the TextMode property to specify how a TextBox control is displayed. Three common options are single-line, multiline, or password text box.
You can also use html5, date, time, number, etc built in Visual Studio 2012/2013.
https://msdn.microsoft.com/en-us/library/system.web.ui.webcontrols.textbox.textmode(v=vs.110).aspx
I went the route of building my own set of html5 inputs by building custom controls. I get the custom keyboards on iPad and iPhone plus the postback coding of true asp.net controls. It worked for my inhouse project, so I decided to license the whole suite to save other people the time and trouble of doing it from scratch.
Hope this helps!
Actually there is no easy way to override the type attribute in standart asp:TextBox.
You can simly use an input element
Here is an example
<input type="date" id="Input1" runat="server" />
Let me know if it helps...