I have two text boxes I need a functionality like If I am typing in 1st text box The text should be getting displayed in 2nd text Box with some other font. This is a web Application. And so Text Box doesn't have OnKeyDown event? Do you suggest any way to implement this?
Note: I don't want to implement this with Javascript.
Solution using an asp:UpdatePanel
With this approach, you don't need to write a single line of JavaScript by yourself; everything is handled by the control.
Page.aspx:
<asp:ScriptManager runat="server"></asp:ScriptManager>
<asp:UpdatePanel runat="server">
<ContentTemplate>
<asp:TextBox runat="server" ID="text1" OnTextChanged="text1_TextChanged"></asp:TextBox>
<asp:TextBox runat="server" ID="text2" class="special"></asp:TextBox>
</ContentTemplate>
</asp:UpdatePanel>
Event handler for the TextChanged event, Page.aspx.cs:
protected void text1_TextChanged(object sender, EventArgs e) {
text2.Text = text1.Text;
}
Solution using ASP.NET and jQuery
Page.aspx:
<script type="text/javascript">
//As soon as the DOM is ready, execute the anonymous function
$(function () {
var textBox1 = $("#<%= text1.ClientID %>");
var textBox2 = $("#<%= text2.ClientID %>");
textBox1.keyup(function () {
textBox2.val(textBox1.val());
});
});
</script>
<asp:TextBox runat="server" ID="text1"></asp:TextBox>
<asp:TextBox runat="server" ID="text2" class="special"></asp:TextBox>
CSS for both approaches:
.special { font-family: YourFontFamilyOfChoice; }
Test Results
I've tested both solutions locally with Firefox 3.6, Opera 10.6, and Internet Explorer 8; both work like a charm.
Use jQuery (JavaScript) combined with CSS. This solution will not trigger a post-back: Your users will see stuff happen as they type.
CSS:
.normalFont { font-family: Arial; }
.alternateFont { font-family: Verdana; }
HTML:
<input ... class="normalFont" />
<input ... class="alternateFont" />
JavaScript (jQuery):
// When the DOM is ready, execute anonymous function
$(function ()
{
// store a reference for the input with the "alternateFont" class
var alternateFontInput = $("input.alternateFont")[0];
// execute anonymous function on key-up event on the input with
// the "normalFont" class
$("input.normalFont").keyup(function ()
{
// set the value of the input with the "alternateFont" class to
// the value of the input with the "normalFont" class (this)
alternateFontInput.value = this.value;
});
});
Related
Is there any way to select all text within a multiline asp:textbox and copy it to client clipboard by clicking a button, using c#?
Thank you in advance.
You can use document.execCommand("copy"); just be aware that this is supported by new browsers mostly and as far as I know there is no support for Safari:
<head runat="server">
<title></title>
<script src="https://code.jquery.com/jquery-1.12.2.min.js"></script>
<script type="text/javascript">
$(function () {
$("#btnCopy").click(function () {
var id = "#" + "<%= txtText.ClientID %>";
try {
$(id).select();
document.execCommand("copy");
}
catch (e) {
alert('Copy operation failed');
}
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<asp:TextBox ID="txtText" runat="server" Text="Some sample text to copy"></asp:TextBox>
<button id="btnCopy">Copy</button>
</form>
</body>
Tested and works with the following browsers:
IE 11 and up
Google Chrome 51.0.2704.84
Firefox 43.0.1
I think #Denis Wessels answer was great but used plain textarea instead of asp:TextBox, therefore I want to write my own that includes asp:TextBox control.
Consider you have a multi-line text area with asp:TextBox server control and a button to copy content into clipboard:
<asp:TextBox ID="TextArea" runat="server" TextMode="MultiLine">
<button id="copy">Copy to Clipboard</button>
Use jQuery and a JS function similar to this:
<script type="text/javascript">
$(document).ready(function () {
$("#copy").click(function() {
// use ASP .NET ClientID if you don't sure
// for ASP .NET 4.0 and above, set your ClientID with static mode
var textarea = "<%= TextArea.ClientID %>";
$(textarea).select();
$(textarea).focus(); // set focus to this element first
copyToClipboard(document.getElementById(textarea));
});
});
function copyToClipboard(elem)
{
var result;
var target = elem;
startPoint = elem.selectionStart;
endPoint = elem.selectionEnd;
var currentFocus = document.activeElement;
target.setSelectionRange(0, target.value.length);
try
{
// this may won't work on Safari
result = document.execCommand("copy");
}
catch (e)
{
return alert("Copy to clipboard failed: " + e);
}
// returning original focus
if (currentFocus && typeof currentFocus.focus === "function") {
currentFocus.focus();
}
elem.setSelectionRange(startPoint, endPoint);
return result;
}
</script>
Reference with minor changes: https://stackoverflow.com/a/22581382, https://stackoverflow.com/a/30905277
Note that for ASP .NET 4 and above you can set static ClientID:
<asp:TextBox ID="TextArea" runat="server" TextMode="MultiLine" ClientID="TextArea" ClientIDMode="Static">
thus you can use $("#TextArea") directly rather than $("<%= TextArea.ClientID %>").
You can use this class:
System.Windows.Forms.Clipboard.SetText(..) <= Sets the text to clipboard,
Inside SetText(), you put textbox.Text to get the text from the multiline asp.net textbox.
function copyToClipboard(element) {
var $temp = $("<input>");
$("body").append($temp);
$temp.val($(element).text()).select();
document.execCommand("copy");
$temp.remove();
}
<link href='https://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<center>
<p id="p1">Hello, I'm TEXT 1</p>
<p id="p2">Hi, I'm the 2nd TEXT</p><br/>
<button onclick="copyToClipboard('#p1')">Copy TEXT 1</button>
<button onclick="copyToClipboard('#p2')">Copy TEXT 2</button>
<br/><br/><input type="text" id="" placeholder="TEST it here;)" />
</center>
I got the process of getting the value of input field in c# in here:
Get value from input html in codebehind c#
I have a hidden input field in my aspx page like this:
<input type="hidden" id="lblCountry_val" runat="server" />
Where the value of the hidden field is put through jquery:
<script type="text/javascript">
$(function () {
BindUserInfo();
})
function BindUserInfo()
{
document.getElementById('lblCountry_val').value = window.strcountry;
}
</script>
<script type="text/javascript" src="http://smart-ip.net/geoip-json?callback=GetUserInfo"></script>
But When I am trying to get the value in Page_Load event in code behind with this:
Response.Write(lblCountry_val.Value);
Nothing is being printed. How come?
EDIT
I have done this by changing the hidden input field to an invisible textbox and then putting "name" attribute in the tag.
<input type="text" id="lblCountry_val" name="lblCountry_val" runat="server" style="display:none" />
And in the code behind:
var txt=Request.Form["lblCountry_val"];
Though I have not a clear idea how it was done.
First Method -
In aspx, When you set a value to html field using Java script, Field's value doesn't appear in code behind file(aspx.cs). So you have to do additional page post back for set a value to hidden field and then you can able to catch the value in code behind file.
Second Method -
Using tag, submit hidden field data to relevant aspx page.Then you can catch the value using Request.Form["lblCountry_val"] array.
You should write
document.getElementById('<%=lblCountry_val.ClientID%>')
This happens because in the most cases the serve side Id of a control is different from its clientId. The way to take it is the above.
Try this...
JavaScript
<script>
$(document).ready(function () {
var test = "1";
$("<%=hdn_audio_length.ClientID%>").val(test);
});
</script>
Html
<asp:HiddenField runat="server" ID="hdn_audio_length" />
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
<asp:Button ID="button1" runat="server" Text="Click" OnClick="button1_Click" />
C#
protected void button1_Click(object sender, EventArgs e)
{
TextBox1.Text = hdn_audio_length.Value;
}
Here's an example setting hidden fields on submit click.
`<script>
$(document).ready(function () {
$("#submit").click(function () {
$("#<%= ccnum.ClientID%>").val($("#cc-num").val());
$("#<%= expdate.ClientID%>").val($("#cc-exp").val());
$("#<%= cvc.ClientID%>").val($("#cc-cvc").val());
});
});
</script>`
I have a asp.net web forms app with update panels.
and its also in a listview and I dont know if that matters or not.
I have the following Javascript..
<script lang="javascript" type="text/javascript">
function pageLoad(sender, args)
{
$(document).ready(function () {
$('textarea.epop').live('click', test);
});
function tes(event)
{
var btn = $(this);
alert(btn.val());
$('#editortext').val(btn.val());
var dialog = $('#edialog').dialog({
modal: true,
width:'auto',
resizable: false,
buttons: {
'OK': function() {
alert($('#editortext').val());
alert(btn.val());
btn.val($('#editortext').val());
$('#editortext').val("");
$(this).dialog('close');
return false;
}
}
});
// Move the dialog back into the <form> element
dialog.parent().appendTo(jQuery("form:first"));
$('#edialog').dialog('open');
return false;
}
}
</script>
Then I have this in the html body..
<div id="edialog" title="Edit SQL" style="display: none">
<label for="editortext">
SQL Query:</label>
<textarea rows="20" cols="100" id="editortext" class="editortext"></textarea>
</div>
and then in one of my list items in my list view wich is inside a update panel. I have..
<asp:TextBox ID='txtSQLQuery' CssClass="epop" TextMode="multiline" Columns="50" Rows="5" runat="server" Text='<%# Eval("SQLQuery") %>' />
code works perfect the first time with no post back.
but say I change the selection, and then a auto postback happens...
then the code no longer sets the text.. when you click ok..
using alerts I can see that its actually still referencing the old value and not the new current displayed value which seemed to invoke the click.
At this point I am stumped..
If you have your controls inside updatepanel and the update panel is set to updatemode ="condicional" you probably have to invoke updatePanel.update() from your server side code to update values.
Another thing that often happens is that the update panel and jquery are not best friends, so it will be better writing or initialize your code like this:
$(document).ready(function () {
$('textarea.epop').live('click', function(e){
test();
});
});
// register again after postback's
var prm = Sys.WebForms.PageRequestManager.getInstance();
prm.add_endRequest(function() {
$('textarea.epop').live('click', function(e){
test();
});
})
Browse and Upload with using asp:FileUploadcontrol is working perfectly fine.
But It is two step process. First we have to browse and then select the file.
I want it working in single step So for making it single step I tried the following code:
protected void Button1_Click(object sender, EventArgs e)
{
//to launch the hidden fileupload dialog
ClientScript.RegisterStartupScript (GetType(),
"hwa", "document.getElementById('fileupload').click();", true);
//Getting the file name
if (this.fileupload.HasFile)
{
string filename = this.fileupload.FileName;
ClientScript.RegisterStartupScript(GetType(), "hwa", "alert('Selected File: '" + filename + ");", true);
}
else
{
ClientScript.RegisterStartupScript(GetType(), "hwa", "alert('No FILE has been selected');", true);
}
}
In this code, there is one fileUpload control that is being invoked on Button1_Click. Ideally it should execute the first line then A file Upload control should be shown and after selecting a file or canceling the dialog, flow should go to next line. But dialog is showing up after full function execution finishes.
Because of this asynchronous or not expected execution flow if (this.fileupload.HasFile) is returning false(because user has not been asked to select any file yet) and I am not getting the selected file name.
Can we modify this code to achieve file upload in single step? Or if any other way is possible to do this?
Note- I have asked not to use window forms and Threads. So solution by using these two is not acceptable.
You are missing the fact there is a client side/server side disconnect in the web environment.
Your line: ClientScript.RegisterStartupScript (GetType(),"hwa","document.getElementById('fileupload').click();", true); is client side code and will not be executed until the serverside script is comleted and the resulting HTML/javascript/CSS returned to the browser as it is client side javascript. YOu want to be leveraging the onchange event of the file upload control.
The question should help you out: ASP.NET FileUpload: how to automatically post back once a file is selected?
this is not exactly what you are looking for but it does what you want. difference is that instead of clicking a separate button you have to click the Browse button. and when you press the Open button, the page will postback. I have used JQuery for this. here's my code
ASPX
<head runat="server">
<title></title>
<script src="Scripts/jquery-1.9.1.min.js"></script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:FileUpload ID="fileupload1" runat="server" />
<asp:Button ID="btn" runat="server" OnClick="btn_Click" Text="upload" style="display:none" />
</div>
<script type="text/javascript">
var isfirst = true;
$(function () {
$('#<%= fileupload1.ClientID %>').on('change', function (e) {
console.log('change triggered');
$('#<%= btn.ClientID%>').trigger('click'); // trigger the btn button click which i have hidden using style='display:none'
});
});
</script>
</form>
</body>
Code behind
protected void btn_Click(object sender, EventArgs e)
{
//TODO
}
For the ones who land here late,
<div>
<asp:FileUpload ID="fu" runat="server" CssClass="bbbb" onchange="clickSeverControl()"/>
<asp:LinkButton Text="Upload" ID="lnkUpload" runat="server" OnClientClick="showUpload();return false;" OnClick="lnkUpload_Click"/>
</div>
hide the file control with css
<style>
.hiddenStyle {
visibility:hidden;
}
</style>
on client click event of link button trigger the click of file upload control
function showUpload() {
document.getElementById("fu").click();
}
on change event trigger the server side click
function clickSeverControl() {
__doPostBack('<%= lnkUpload.ClientID %>', 'OnClick');
}
on server click save the uploaded file
protected void lnkUpload_Click(object sender, EventArgs e)
{
fu.PostedFile.SaveAs(Server.MapPath("~/Upload") + "/" + fu.PostedFile.FileName);
}
Thanks for the other answer I have just combine two example and got the solution for my problem in my project
<head runat="server">
<title></title>
<script src="Scripts/jquery-1.9.1.min.js"></script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:FileUpload ID="fileupload1" runat="server" />
<asp:Button ID="btnUploadBulk" runat="server" OnClick="btn_Click" Text="upload" style="display:none" />
</div>
<script type="text/javascript">
var isfirst = true;
$(function () {
$('#<%= btnUploadBulk.ClientID%>').on('click', function (e) {
showUpload();
})
});
function showUpload() {
var control = document.getElementById("<%= FileUploadControl.ClientID %>");
control.click();
}
</script>
</form>
Code Behind
protected void btn_Click(object sender, EventArgs e)
{
//TODO
}
This worked for me
<script language="javascript" type="text/javascript">
function myjavascriptfn()
{
//debugger;
var strValue= "test";
return strValue
}
How do I call this javascript function in my code behind and proceed appropriately with respective of return values.
You can easily declare JavaScript to be run on the Client using
ScriptManager.RegisterStartupScript(this, this.GetType(), "launchpage", "
function javascriptfn() {
var strValue= 'test';
return strValue;
}
document.getElementById('"+HiddenField1.ClientID+"').value = javascriptfn();
document.getElementById('"+saveProgressButton.ClientID+"').click();
", true);
note: I have divided out the JavaScript out onto multiple lines to make it easier to read but it should all be on one line.
Your problem comes with the second part of the question, sending the data back, you will most likely need a postback (partial or full or handle it with AJAX.
I would add an updatepanel with a asp hiddenfield and a hidden button to trigger it, populate the value of the hidden field with whatever this function is for had have some code in your code behind to capture the event.
<asp:UpdatePanel ID="responcetable" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<asp:HiddenField ID="HiddenField1" runat="server" />
<asp:Button ID="saveProgressButton" runat="server" Text="Button" CssClass="displaynone" />
</ContentTemplate>
<Triggers><asp:AsyncPostBackTrigger ControlID="saveProgressButton" EventName="theeventtodealwiththis" /></Triggers>
</asp:UpdatePanel>
and on the serverside
protected void theeventtodealwiththis(object sender, EventArgs e)
{
// some logic to handle the value returned
}