Develop Reference

Get changed text on a input field using jQuery

So, I know how to detect when a user has changed the text on a input field (including typing, pasting, and other means)...
But for my purpose, I need to know exactly what was changed in the text field.
For example, initially, the text field contains this:
This is a text
Then the user changes it to this:
This is my text
The script should return this to me: text position from 8 to 9 was changed to my.
So is there an easier way to do this without having to use a difference checker algorithm? Because it seems that if I put an event for keyup, I can detect what position was changed or deleted, but this won't detect the whole text pasted from Ctr+V. Anyways, I need a fast way to send the differences in a text to synchronize it with the database on the server using AJAX, kinda like Google Docs, but I feel like resending the whole text field every so on and then is very inefficient, mainly because the user may be editing a very large text field.

Try this:
<script>
$(document).ready(function(){
var inival=$("#myinput").val();
$("#check").click(function(){
$("#log").empty();
var newval=$.trim($("#myinput").val());
var splitval=newval.split(' ');
for(var i=0; i<splitval.length; i++){
if(inival.indexOf(splitval[i])<0){
var charindex=newval.indexOf(splitval[i]);
$("#log").append('text position from '+charindex+' to '+(charindex+1)+'
was changed to '+splitval[i]+'<br>');
}
}
});
});
</script>
<input type="text" value="This is a text" id="myinput"><input type="button"
value="Check" id="check"><br>
<div id="log"></div>
jsfiddle

How to Change textbox text into another textbox in asp.net C#?

I am having two text boxes on my web page as txtGivenName and txtDisplayName. Now I want to display txtGivenName text on txtDisplayName while entering text on txtGivenName by using keypress event or keydown event.
I have tried some code for achieve this but not able to get the textbox1 value on textbox2.
My Code is:
<asp:TextBox ID="txtGivenName" runat="server" onkeypress = "copyText()" ></asp:TextBox>
Script code is:
function copyText() {
var givenName = document.getElementById("txtGivenName");
var displayName = document.getElementById("txtDisplayName");
displayName = givenName;
}
but nothing happened while entering text on txtGivenName. Can anyone suggest me to achieve this or tell me any other way to achieve this?
(Note: I dont want to do this by OnTextChanged event, Bcoz it will populate the first text box value on second one after text enter got over only. While entering the text on first textbox we need to change the text on second textbox simultanously)
Thanks.
I got the exact answer for this feature by using below mentioned script code.
Solution:
function OneTextToOther() {
var first = document.getElementById('<%= txtGivenName.ClientID %>').value;
document.getElementById('<%= txtDisplayName.ClientID %>').value = first;
}

Take a look at the page source in the browser -- "txtGivenName" and "txtDisplayName" are not going to be the IDs of the text boxes because ASP.NET prepends the IDs based on the control hierarchy so they are globally unique.
You have two options -- use "<%=txtGivenName.ClientID%>" to get the true name of the text box in javascript, or set ClientIdMode="static" on the text boxes so the IDs are left alone.
function copyText() {
var givenName = document.getElementById("<%=txtGivenName.ClientID%>");
var displayName = document.getElementById("<%=txtDisplayName.ClientID%>");
displayName.value = givenName.value;
}

You can try keyup event but I know only Jquery method to do it.
<input class="one" type="text"/>
<input class="two" type="text"/>
$(".one").on("keyup", function(){
$(".two").val($(".one").val());
});
here is the demo: http://jsfiddle.net/pUpZA/
PS: the asp:textbox translates to input when you compile so its basically the same thing. use "CssClass=one" for your asp:textboxes

Making a text box read only after some data is fetched into it

I Have a text box and a control button next to it.Clicking on the button will call another function where some data is selected and written back to the text box.Currently my text box is editable by the user after the data is fetched to the text box.I want to make the text box read only after the user clicks on the button and fetches the data to the text box,So that now the data is present in the text box which cannot be edited.If the user has to change the data,the user has to again click on the button to call the function which will help us over write the data in the text box.How can I accomplish this in javascript.

you can do it like this
HTML:
<input type="text" id="mytextbox" value="click the button below."/>
<input type="button" value="click" onclick="changeText();"/>
Javascript:
function changeText(){
var text_box = document.getElementById('mytextbox');
if(text_box.hasAttribute('readonly')){
text_box.value = "This text box is editable.";
text_box.removeAttribute('readonly');
}else{
text_box.value = "This text box is read only.";
text_box.setAttribute('readonly', 'readonly');
}
}
fiddle example: http://jsfiddle.net/b7jAy/

you can use jQuery .attr() function to set the readonly status of the text field.
$('#textfield').attr('readonly', true);
$('#textfield').attr('readonly', 'readonly');

Please try with JQuery. Thousands of reasons to use it as Javascript framework. Here is a response to your question:
Add "readonly" to <input > (jQuery)
Hope that helps,

Assign an id attribute to the text box, say <input id=foo>, and use
document.getElementById('foo').readOnly = true;

In Ckeditor how to copy/get all formatting from a selected text

I am using CKEditor ver.3.6 in my Asp.net MVC 3 Application.
My requirement is to create Paint format option in the Google doc.I need to implement Paint format option in a ckeditor.
In Ckeditor how to copy/get all formatting such as font, font effects, centered paragraph alignment from a selected text(source) to a newly selected text (destination).
Please suggest a proper solution.

Use this function to replace the content of a selected html with the text in one field. On a button click, call this function:
function Replace()
{
var sel = editor.getSelection();
var ele=sel.getStartElement();
if(ele.hasAttributes())
{
var insertele= editor.document.createElement('span');
ele.copyAttributes(insertele,{type:1,value:1})
insertele.setHtml($("#repTxt").val());
editor.insertElement(insertele);
}
}

Replace selected content in the ckEditor with new content using javascript

I am using CKEditor ver.3.6 in my MVC Application.
My requirement is to update the selected text with new text in the ckEditor. I could find out the method editor.getSelection().getSelectedText(); for getting selected text from the editor. I need to add some tag with the selected text when a toolbar button is pressed and update the selected content using javascript.
For Example :
Content in the ckEditor is
<span>Edit content in the editor</span>
and I have selected the word “editor” from ckEditor. I have to update the selected word “editor” with “ckEditor” using javascript code.
Please suggest a proper solution.

It looks to me from the docs as the following would work (untested):
editor.insertText("ckEditor");

Use this function in the onclick event of a button.
function Replace()
{
//after selecting the text in the editor
//get text to replace;
var repStr=$("#repTxt").val();
editor.insertHtml(repStr);
}
Cheers
Sunil Raj

Both editor.insertText() and editor.insertHtml() should work, but you have to make sure the editor is ready before you attempt to update the text:
var editor = CKEDITOR.replace('editor');
editor.on('instanceReady', function(){
editor.insertHtml('...');
});