I want to display a background text in the textbox.
ex: The Title textbox in the stackoverflow Ask question page.
Needs: If i enter some text inside the textbox it should disappear.
Geetha.
A good link is http://attardi.org/labels as referenced here https://stackoverflow.com/questions/781473/how-to-create-a-label-inside-an-input-element
You need to use javascript for the same.
Use following two functions in javascript and it is done.
function clearDefault(obj,val)
{
objInput=document.getElementById(obj);
if(objInput.value==val)
{
objInput.value="";
}
}
function setDefault(obj,val)
{
objInput=document.getElementById(obj);
if(objInput.value=="")
{
objInput.value=val;
}
}
You need to apply it on your code by using two javascript events as follow.
<input name="email" type="text" class="textbox" id="email"
value="Email" size="12" onfocus="clearDefault('email','Email');"
onblur="setDefault('email','Email');"/>
So when you control get focus it the default text will be cleared.
Ant That's it.
Hope this will help!
Well, since you put jquery as a tag for the question, I assume you're already using jquery for your project. In that case, here's a neat plugin that does the trick: Labelify.
Good luck!
Related
I am still new to the coding field and am having a bit of trouble with a part, hoping someone can help me. I am working on a MVC page where i am trying to move text, the user inputs, around the page to a few pre-set spots and without having to refresh the page. Do i need a type of script for this? And if i do what would be best? Thanks for the help.
You can do it this way.
Enter Text here... <input id="testText" type="text" onKeyUp="javascript:showText($(this), event);"/>
<br/>
<br/>
<br/>
See it here... <span id="testTextSpan"></span>
Then, add this script...
<script type="text/javascript">
var showText = function (el, e) {
$('#testTextSpan').html(el.val());
};
<script>
See it here in this JSFiddle...
http://jsfiddle.net/ZEcNp/
Be sure to include JQuery libraries in your project, or reference the CDN.
If you'd like me to include an example with raw javascript, with no JQuery, I can also provide that for you.
I would recommend jQuery to do all that client-side.
You would just need an ID for each element you would use as the predefined spots, using either .appendTo, .insertAfter, .html, or something else depending on your exact needs.
I am working on a webforms project using c#/aspx/jquery. I'm not sure where to handle my Onclick. Both options (doing it in C# or jquery) seem feasible. Which would be better practice?
Here is the scenario:
I want to build a checkbox which will toggle a textbox's textmode, altering it between Password and SingleLine.
Currently, I have this following code for my markup since I am currently handling it in C#:
<asp:Checkbox ID="CheckBox1" OnCheckedChanged="CheckBox1_OnCheckedChanged"/>
The code:
protected virtual void OnCheckedChange(EventArgs e)
{
If (CheckBox1.TextMode == TextMode.Password)
CheckBox1.TextMode = TextMode.SingleLine;
else
CheckBox1.TextMode = TextMode.Password;
}
The use case of this is: A user is entering his password. On the same page, he may choose to keep the password hidden or not by checking the checkbox.
Which would be better practice?
What is your functional requirement?
Setting this in C# on the asp.net code behind, you will need a post-back to make it work. This means the page will refresh and the text box will change.
On the client (JS/JQuery) the page will not refresh.
Now you evaluate the work required vs the quality you need. (If you want a nice user experience and are ok with writing JS put it in JS, if you're strapped for time and are ok with the refresh then do it on asp.net).
I'm trying to answer your question in general sense about HOW such a decision (in my humble opinion) should be made. Realistically this is very simple to implement in javascript and your should do it there.
Now for the code (I assume you know how to put it in asp.net code behind so I'm going to write the JS approach):
Html:
My Password: <input type="password" id="mytext" /> <br />
Hide Chars : <input id="passChk" type="checkbox" checked="true" />
Javascript:
$(function() {
$("#passChk").change(function(){
if(this.checked) {
$("#mytext").attr("type","password");
} else {
$("#mytext").attr("type","text");
}
});
});
See it running here: http://jsfiddle.net/rC5NW/2/
After trying to implement the accepted answer, I realized that some browsers (I used Google Chrome) does not allow changing the type attribute. There is a way to bypass this but I don't think it is worth it for my purposes:
Therefore, It might be better to just use C#.
Relevant Questions
Does javascript forbid changing the input type from password or to password?
change type of input field with jQuery
I have this in the
<asp:TextBox ID="svv" OnClick="this.value=''" runat="server">Hello...</asp:TextBox>
OnClick="this.value=''" // On mouse click in textbox it will deleted the text.
How can I set something like
Unclick"this.defautlvalue"; // something like this.
So, when I click the control it will clear the value, if I exit from the control (for example, clicking another textbox) it will return the default value of the textbox.
Thanks
Specifically with C# .NET WebForms you have a few options.
You can go completely front-end with jquery by doing something like this:
$('selector').blur(function() {
// Make sure you do some validation so it doesn't clear everytime
$('selector').val('My Default Text');
});
Or, if you are using the AJAX Control Toolkit, you can simply use The textbox Watermark Control, which will do exactly what you are talking about just by setting a few properties.
You can also go straight javascript like #m.edmondson explain in his answer.
I think you're looking for onBlur:
<input type="text" id="fname" onblur="upperCase()">
This will call upperCase() when the user leaves the box.
You can attach to the client-side onblur event which is called when the focus of your control changes.
Also worth storing the default value in an attribute on the input so you can refer to it in blur event. Believe in ASP.NET web forms you've got to add that attribute in the code-behind though.
I'm trying to write a small program in C# to calculate a equation with a few known variables. A few textboxes (where each variable need to be typed) and a single "calculate" button.
What I'm trying to implement now is that my keyboard cursor is active in a selected textbox when the program starts.
But I can't figure it out.
Hope someone can help me.
For Winforms : View > Tab Order. Set tab order of start textbox to 0.
write this in your head tag
<script type='text/javascript'>
document.getElementById('txtName').focus();
</script>
I see, you forgot to write down your C# (when i post my first answer).
If you're using C# it would be lot easier thank HTML or PHP.
Simply type this in form_load() :
<your textboxname>.Focus()
Example :
TextBox1.Focus()
You can set up the order of focus with tabindex
e.g.
<input id="thing" tabindex="1" />
tabindex is ordinal. When set, the element with the lowest tab index value will be the first to gain focus.
You can also use tabindex to ensure the next element that the user will hit if he or she presses tab.
You can do that using JQuery.
Simple use that code:
$('#TextBox').focus();
where the TextBox is a ID from your TextBox Control.
I hope that helps.
So, what programming language that you are using?
In php you could use simple javascript :
<form>
<input type="text" id="mytext1" name="mytext1" value="1"><br>
<input type="text" id="mytext2" name="mytext2" value="2"><br>
<input type="text" id="mytext3" name="mytext3" value="3"><br>
</form>
<script language="javascript" type="text/javascript">
var mytext = document.getElementById("mytext1");
mytext.focus();
</script>
when you load the page it would be focused on "mytext1"
Hope this helpful
I have an ASP.NET 2.0 webapp (with C#). I wanted to add a button which, when clicked would highlight selected text. By 'highlight', I mean change the CSS properties of the text so that it can stand out. I think this can be done with some clientside JavaScript.
I know that you can assign a Javascript function to the onclick event of an HTML input button, but since I'm not very proficient at JS the function itself I have no idea how to write...
Can someone please help?
Thanks a bunch!
Looks like there is a jQuery plugin that does something similar to what you want. Not sure if it works inside of a textbox but it probably wouldn't take much to get it there. Check out this link:
http://johannburkard.de/blog/programming/javascript/highlight-javascript-text-higlighting-jquery-plugin.html
It seemns to me that be best solution is to use regex to find searched text and then wrap it in a tag which has certain desired style assigned to it.
You could look here at w3schools
or briefly
var searchString = "abra";
string.replace(searchString,"<span class='highlight'>"+searchString+"</span>")
It would be something like this:
The function:
< script type="text/javascript">
function highlightMyText() {
elem=document.getElementById('textToTurnRed');
elem.style.color="red";
}
< /script>
Then in the body:
< div id="textToTurnRed">
My text that will be turned red
< /div>
Then the button:
< input type="button" value="Turn Red" onclick="highlightMyText" />
You can do all sorts of stuff with element.style, like change the color, visibility, whatever you need.