如何在 panel/page 刷新后设置 editBox 焦点

Question

在我的 xPage 上，我只有一个面板和里面的编辑框。

<xp:panel id="panel1">
    <xp:inputText id="inputText1">
    <xp:eventHandler event="onkeydown" submit="true"
        refreshMode="partial" refreshId="panel1">
    </xp:eventHandler></xp:inputText>
</xp:panel>

通过在 editBox 中按 Enter 键，我想刷新我的 panel1，然后 return 聚焦到我的编辑框 inputText1。

P.S。假设该面板上还有其他组件，这就是为什么我想在用户将内容输入编辑框并按 Enter 键后刷新它。一旦您将面板刷新到 onkeydown 事件或事件处理程序的 onComplete 中，任何 focus() 设置代码都不起作用。但是，如果您离开该面板，则可以设置焦点（例如，带有 onclick 事件“...focus())”的新按钮

Answer 1

按回车键是通过 JavaScript 侦听器接收的正常功能。也可以通过客户端 XSP 对象从 JavaScript 触发部分刷新。这是基本实现的样子。

    <xp:panel
        id="panel1">
        <xp:inputText
            id="inputText1">
            <xp:eventHandler
                event="onkeydown"
                submit="false"
                id="eventHandler1"
                execMode="partial">
                <xp:this.script><![CDATA[if(event.keyCode == 13){
    event.preventDefault();
    XSP.partialRefreshPost("#{id:panel1}",{
      onComplete: function(){
          document.getElementById("#{id:inputText1}").focus();
      }
});
}]]></xp:this.script>
            </xp:eventHandler>
        </xp:inputText>
    </xp:panel>

编辑：我忘记在输入操作中使用 event.preventDefault()。我确认这在此处显示的示例 XPage 中有效。或者，代替 focus call, you could use a select to highlight existing text, or do something else to put the cursor at the end of the field。

Answer 2

我写了一个general purpose snippet a while back that tries to counteract the effect of partial refresh on focus states. If I understand your issue correctly, this would remove the need to "hard code" which field you want to have focus after the refresh. You will also need the snippet for hijacking partial refreshes.

我认为在添加这两个代码段后，您唯一需要做的就是确保 handler/partial 刷新事件仅在输入键时触发。

在客户端脚本中：return ( thisEvent.keyCode === 13 );

劫持部分刷新的代码片段：

function hijackAndPublishPartialRefresh(){
 // Hijack the partial refresh
 XSP._inheritedPartialRefresh = XSP._partialRefresh;
 XSP._partialRefresh = function( method, form, refreshId, options ){  
     // Publish init
     dojo.publish( 'partialrefresh-init', [ method, form, refreshId, options ]);
     this._inheritedPartialRefresh( method, form, refreshId, options );
 }

 // Publish start, complete and error states 
 dojo.subscribe( 'partialrefresh-init', function( method, form, refreshId, options ){

  if( options ){ // Store original event handlers
   var eventOnStart = options.onStart; 
   var eventOnComplete = options.onComplete;
   var eventOnError = options.onError;
  }

  options = options || {};  
  options.onStart = function(){
   dojo.publish( 'partialrefresh-start', [ method, form, refreshId, options ]);
   if( eventOnStart ){
    if( typeof eventOnStart === 'string' ){
     eval( eventOnStart );
    } else {
     eventOnStart();
    }
   }
  };

  options.onComplete = function(){
   dojo.publish( 'partialrefresh-complete', [ method, form, refreshId, options ]);
   if( eventOnComplete ){
    if( typeof eventOnComplete === 'string' ){
     eval( eventOnComplete );
    } else {
     eventOnComplete();
    }
   }
  };

  options.onError = function(){
   dojo.publish( 'partialrefresh-error', [ method, form, refreshId, options ]);
   if( eventOnError ){
    if( typeof eventOnError === 'string' ){
     eval( eventOnError );
    } else {
     eventOnError();
    }
   }
  };
 });
}

记忆焦点状态的代码片段：

dojo.addOnLoad(function(){
dojo.subscribe( 'partialrefresh-init', function(){
 // setTimeout needed to make it work in Firefox
 setTimeout(function(){
  var activeElementId = document.activeElement.id;  

  var focusSubscription = dojo.subscribe( 'partialrefresh-complete', function(){
 // Only set focus if field hasn't been overwritten/lost focus
 if( document.activeElement.id !== activeElementId ){
  var activeElement = dojo.byId(activeElementId);

  if( activeElement && /INPUT|SELECT|TEXTAREA/.test( activeElement.nodeName ) ){
   // Set focus to element/select text
   activeElement.focus();
   if( activeElement.nodeName !== 'SELECT' ){
    activeElement.select();
   }
  }
 }

   // Unsubscribe after focus attempt is done
   dojo.unsubscribe( focusSubscription );
  });

  // In case of error -> remove subscription
  var errorSubscription = dojo.subscribe( 'partialrefresh-error', function(){
     dojo.unsubscribe( focusSubscription );
  });
 }, 0 );
} );
});

如何在 panel/page 刷新后设置 editBox 焦点

how to set editBox focus after panel/page refresh

lotus-notes

xpages