Search code examples
javascriptc#asp.netcursor

3 textboxes, 1 button, on button click put text in the textbox where the cursor is


I have 3 textboxes and a button, what I need to do is that on the button click I want text to appear in which ever textbox the cursor is located.

I can do it for one textbox but for 3 different I need 3 different buttons.

Can you plz help me do it using just one button??? Plz help..

This is what I have accomplished for 1 textbox:

function insertAtCaret(areaId, embedctrl) {

        var text = document.getElementById(embedctrl).value;
        if (text != "-1") {
            var txtarea = document.getElementById(areaId);
            var scrollPos = txtarea.scrollTop;
            var strPos = 0;
            var br = ((txtarea.selectionStart || txtarea.selectionStart == '0') ?
                "ff" : (document.selection ? "ie" : false));
            if (br == "ie") {
                txtarea.focus();
                var range = document.selection.createRange();
                range.moveStart('character', -txtarea.value.length);
                strPos = range.text.length;
            }
            else if (br == "ff") strPos = txtarea.selectionStart;

            var front = (txtarea.value).substring(0, strPos);
            var back = (txtarea.value).substring(strPos, txtarea.value.length);
            txtarea.value = front + text + back;
            strPos = strPos + text.length;
            if (br == "ie") {
                txtarea.focus();
                var range = document.selection.createRange();
                range.moveStart('character', -txtarea.value.length);
                range.moveStart('character', strPos);
                range.moveEnd('character', 0);
                range.select();
            }
            else if (br == "ff") {
                txtarea.selectionStart = strPos;
                txtarea.selectionEnd = strPos;
                txtarea.focus();
            }
            txtarea.scrollTop = scrollPos;
        }
    }

In the above eg, the dropdown's(embedctrl) selectedvalue gets inserted at cursor position in a textbox.

Part 2:

I tried the following using a dropdownlist to insert text in the textboxes but it doesnt work. Any insights so as to why???

<script type="text/javascript">
       $(document).ready(function () {
           var selectedTextBox;
           $("input[type='text']").on("focusin", function () {
               debugger;
               selectedTextBox = this;
           });
           $("#ddlEmbedDBField").on("change", function () {
               debugger;
               var value = document.getElementById('<%=ddlEmbedDBField.ClientID%>').value;
               if (document.getElementById('<%=ddlEmbedDBField.ClientID%>').value != "0")
               {
                   $(selectedTextBox).val(value);
               }              

           });
       });
</script>

Solution

  • without using jQuery:

    var lastclick;
    
    		function LastClicked(elem){
    			lastclick=elem;
    		}
    
    		function putText(area){
    			lastclick.value=area.value;
    		}
    <input type="text" onblur="LastClicked(this)"/>
    <input type="text" onblur="LastClicked(this)"/>
    <input type="text" onblur="LastClicked(this)"/>
    <input type="button" value="click me" onclick="putText(document.getElementById('mytext'))"/>
    <textarea id="mytext" cols="20" rows="2"></textarea>

    You keep track of the last element focused.