0

I wanted an expert's advice on how should i bind my input text field to a particular keyboard keys (Ctrl + P) such that the text field gets in focus.

Also, how should i make dynamic growing text field, which increases according to the number of rows required by the user. (like facebook)

1
  • 1
    Hi Shri, welcome to SFSE! Please take the time to visit the Help center and read How do I ask a good question. If you post what you've written so far and where you're stuck, I'm confident you'll find plenty of people willing to assist you.
    – crmprogdev
    Sep 4 '15 at 14:47
2

You can achieve the required functionality by capturing the keypress on the document and focussing on the required input accordingly. The following code will focus on the input with id "a" when ctrl+z is pressed(keycode for z is 90).

<script>
function KeyPress(e) {
      var evtobj = window.event? event : e
      if (evtobj.keyCode == 90 && evtobj.ctrlKey){
          alert("Ctrl+z");
          document.getElementById("a").focus();
      }
}
document.onkeydown = KeyPress;
</script>
<input type="text" id="a">

But when i tried to use keyCode 80(keyCode for p) it opens the print popup when i pressed ctrl+p. Its the default combination which is reserved for print preview and you cannot override it.

Hope it helps.

1

Here is a code on how to achieve the dynamic growing of the TextArea. I have also included the focus solution from Vigneshwaran G's solution. Hope this helps.

VF Page

<apex:page showHeader="true" sidebar="true" controller="AutoGrowText">
    <apex:pageBlock id="thePage">
        <apex:form id="theForm">
            <apex:pageBlockSection>
                <apex:inputText value="{!inputText}" id="theTextInput" label="Input Text"/>
            </apex:pageBlockSection>
            <apex:pageBlockSection id="thePageBlockSection">
                <apex:inputTextarea cols="30" rows="2" value="{!inputTextArea}" id="theTextInputArea" label="Input Text Area" onkeyup="AutoGrowTextArea(this)"
                 style="overflow:hidden"/>
            </apex:pageBlockSection>
        </apex:form>
    </apex:pageBlock>   
    <script type="text/javascript">
        function AutoGrowTextArea(textField) {
            if (textField.clientHeight < textField.scrollHeight) {
                textField.style.height = textField.scrollHeight + "px";
                if (textField.clientHeight < textField.scrollHeight) {
                    textField.style.height = (textField.scrollHeight * 2 - textField.clientHeight) + "px";
                }
            }
        }
        function KeyPress(e) {
              var evtobj = window.event? event : e
              if (evtobj.keyCode == 90 && evtobj.ctrlKey){
                  alert("Ctrl+z");
                  document.getElementById("{!$Component.thePage.theForm.thePageBlockSection.theTextInputArea}").focus();
              }
        }
        document.onkeydown = KeyPress;          
    </script>
</apex:page>

Controller

public with sharing class AutoGrowText {
    public String inputText {get;set;} 
    public String inputTextArea {get;set;}

    public AutoGrowText() {

    }
}
0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.