I am developing web applications in asp.net using c#, so I placed asp:textbox in web application. When i am loading page, i want to have default text in text box and when i place cursor on it and type the first letter, the text box become clear from textbox.
what you are asking is called watermarking. There are so many ways to do it
Third Party tools like :
a. Ajax ToolKit. you can see it in action here
b. Telerik RadTextBox Control (by setting its EmptyMessage property) .
and so many.
You can yourself build one using simple javascript like below:
<script>
$(document).ready(function() {
var watermark = 'textbox watermark text';
$('#inputTextboxId').blur(function(){
if ($(this).val().length == 0)
$(this).val(watermark).addClass('watermark');
}).focus(function(){
if ($(this).val() == watermark)
$(this).val('').removeClass('watermark');
}).val(watermark).addClass('watermark');
});
</script>
and place an input control inside your container say body
<body>
<input id="inputTextboxId" type="text" />
</body>
Also, if your entire work area resides in HTML5 supported browsers,then simply do this:
<input type="text" placeholder="Enter your name...">
and your textbox will have watermark "Enter your name..." which would disappear on focus.
Another alternative is the HTML5 Placeholder tag, although this isn't fully supported in all browsers.
I would recommend the javascript alternative #Jon Malcolm suggested.
You can do this using the AjaxControlToolkit's TextBoxWatermark extender. Add the AjaxControlToolkit to your project (using Nuget is the easiest way), and then in your markup you can specify the text to be displayed like this:
<asp:textbox runat="server" id="MyTextBox" />
<ajaxtoolkit:TextBoxWatermarkExtender runat="server" id="MyTextBoxExtender" TargetControlId="MyTextBox" WatermarkText="Default Text" />
Or you can do this with the jQuery Watermark plugin - there's details on how to implement this in the answer to this question.
Try the below mentioned following code it wil help to you to solve your problem
<asp:TextBox ID="Textbox"
CssClass="Input"
onfocus="if(this.value == 'Name'){this.value='';}"
onblur="if(this.value == ''){this.value='Name';}"
Width="300"
runat="server"
text="Name" />
Related
I've got a styling question on my hands. Using sensenet, a platform for ASP.net functionality, forms are done with not only sensenet language, but also ASP.net language as well.
I'm having a problem making the ASP:TextBox feature look like the bootstrap input box. I've called the bootstrap css file, tried changing the class for the ASP:TextBox code, but nothing works aside from just using the html tag of
<input class="text input-sm">
Here's the code I have so far:
<asp:TextBox CssClass="text input-sm" ID="InnerControl" placeholder="Middle Name" runat="server"></asp:TextBox>
.. and the css is being incoporated here:
<sn:CssRequest CSSPath="$skin/styles/Projectname/bootstrap.min.css" ID="pageTemplateUIStyleReq1" runat="server" />
Is there anyway to make the ASP:TextBox to look like the bootstrap input box but also function the way it's meant to function through ASP language?
Attached are images of the before and after-sought effects:
what I have now:
what I'm looking to attain:
The way you are adding the class to your textbox is correct. The problem is here:
<sn:CssRequest CSSPath="$skin/styles/Projectname/bootstrap.min.css" ID="pageTemplateUIStyleReq1" runat="server" />
Just add a normal reference to your stylesheet and don't try to load it server side. If your page requires this, check to ensure it is loading bootstrap correctly in your browsers dev tools.
How do I put a hint/placeholder inside a asp:TextBox? When I say a hint I mean some text which disappears when the user clicks on it. Is there a way to achieve the same using html / css?
The placeholder attribute
You're looking for the placeholder attribute. Use it like any other attribute inside your ASP.net control:
<asp:textbox id="txtWithHint" placeholder="hint" runat="server"/>
Don't bother about your IDE (i.e. Visual Studio) maybe not knowing the attribute. Attributes which are not registered with ASP.net are passed through and rendered as is. So the above code (basically) renders to:
<input type="text" placeholder="hint"/>
Using placeholder in resources
A fine way of applying the hint to the control is using resources. This way you may have localized hints. Let's say you have an index.aspx file, your App_LocalResources/index.aspx.resx file contains
<data name="WithHint.placeholder">
<value>hint</value>
</data>
and your control looks like
<asp:textbox id="txtWithHint" meta:resourcekey="WithHint" runat="server"/>
the rendered result will look the same as the one in the chapter above.
Add attribute in code behind
Like any other attribute you can add the placeholder to the AttributeCollection:
txtWithHint.Attributes.Add("placeholder", "hint");
Just write like this:
<asp:TextBox ID="TextBox1" runat="server" placeholder="hi test"></asp:TextBox>
<asp:TextBox runat="server" ID="txtPassword" placeholder="Password">
This will work you might some time feel that it is not working due to Intellisence not showing placeholder
Adding placeholder attributes from code-behind:
txtFilterTerm.Attributes.Add("placeholder", "Filter" + Filter.Name);
Or
txtFilterTerm.Attributes["placeholder"] = "Filter" + Filter.Name;
Adding placeholder attributes from aspx Page
<asp:TextBox type="text" runat="server" id="txtFilterTerm" placeholder="Filter" />
Or
<input type="text" id="txtFilterTerm" placeholder="Filter"/>
asp:TextBox ID="txtName" placeholder="any text here"
In my ASP.NET page I am using the "FileUpload" control.
The whole thing is implemented and is working as expected but...
I don't want the TextBox control which is a part of "FileUpload". (FileUpload = TextBox + Button)
Is it possible that I can remove/hide only the TextBox and let the Button look like a LinkButton?
Thanks
<input type="file" id="selectedFile" style="display: none;" />
<input type="button" value="Browse..." onclick="document.getElementById('selectedFile').click();" />
This will surely work. i have tried it in my project.It dosent require javascript or CSS.
Actually, you can use this trick:
FileUpload fileUpload = new FileUpload();
fileUpload.Width = Unit.Pixel(83);
The button is 83 pixels and the textbox is the rest. If you force the control to a width of 83 pixels then the button is shown and the textbox is not.
For Asp.Net with HTML5 you can use document.getElementById('<%=ServerControlID.ClientID%>') to solve this issue.
My working code
HTML5
<asp:FileUpload ID="FileUpload1" runat="server" Style="display: none;" />
<input type="button" value="Browse" onclick="showBrowseDialog()"/>
Javascript
function showBrowseDialog() {
var fileuploadctrl = document.getElementById('<%=FileUpload1.ClientID%>');
fileuploadctrl.click();
}
Works in Firefox, IE & Chrome.
Not really. The fileUpload control is not style-able since it is sandboxed from the page for security. With HTML5 you can do your own file uploading or you can alternatively use flash, but otherwise you're stuck with what the browser gives you.
It can be done, but it's nasty. It involves some javascript and CSS cleverness to basically make the control invisible, placing an image in the background behind it.
See this answer from a couple years back.
I'm using markdownsharp with my asp.net forms website.
I want to use MarkItUp as my editor and have found a straight forward article on how to integrate with MVC which seems straight forward enough: http://rsolberg.com/2010/09/asp-net-mvc-markitup-rich-text-editor/
However, how do I do this with a forms website?
How do I get the MarkItDown Textarea on a postback and get the preview to work as well?
Place the Javascript and CSS file links in the head portion of the page just as you would with MVC. Then in your form, place a TextArea control. Set the rows and columns as needed.
<asp:TextBox ID="txtEditor" runat="server" TextMode="MultiLine" Columns="40" Rows="5" Text="" />
Then use JQuery to enable to functionality.
$(document).ready(function() {
$('<%=txtEditor.ClientID%>').markItUp(mySettings); });
Then on PostBack the contents of the editor will be available in the Text property of the TextBox control.
txtEditor.Text
This is not the only way to do this, you could also use a HTML TextArea control with a runat="server" attribute. Use whatever your personal preference is.
I want to change the Text of the browse button in the FileUpload Control (System.Web.UI.WebControls), instead of the [Browse...] text I want to use [...]
This is old, but wanted to offer another solution. You can use jQuery on a standard HTML hyperlink and fire asp:FileUpload on click of the HREF. Just hide the asp:FileUpload at design and doctor the href any way you'd like.
Link
Attach File
asp:FileUpload
<asp:FileUpload ID="fuSOW" runat="server" style="visibility:hidden;"/>
Then the jQuery:
$("#lnkAttachSOW").click(function () {
$("#fuSOW").click();
});
This isn't technically possible for security purposes, so the user cannot be misled.
However, there are a couple of workarounds, although these require working with the raw HTML rather than the .NET server control - take a look at http://www.quirksmode.org/dom/inputfile.html for one example.
This was how I did it in .NET using AsynchFileUpload and JavaScript...
<asp:Button ID="bUploadPicture" runat="server" Text="Upload Picture"
OnClientClick="document.getElementById('<%=tFileUpload1.ClientID%>')
.click();return (false);" />
<div style="display:none;visibility:hidden;">
<asp:AsyncFileUpload ID="tFileUpload1" runat="server"
OnUploadedComplete="tFileUpload1_UploadedComplete" />
</div>
Some third party tools provide this option. For example, we use the Telerik Upload control:
Changing the text of the Browse/select button
Example of Rad Upload control
You could use another button and java script to trigger upload browse button, Check this cute and simple solution How to change Text in FileUpload control
Hope this help.