业务系统中,很多录入人员习惯于用Enter键来代替Tab键切换控件焦点(虽然我个人并不觉得这样录入速度会变得有多高效,呵呵),有需求了,自然就得想办法满足。
思路:为了更灵活的控件焦点顺序,我决定用TabIndex来做文章,每个输入控件按下回车时,找到下一个比当前控件TabIndex更大且最接近的控件,然后focus().
XAML界面部分:
<UserControl x:Class="tab_key_test.MainPage" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d" d:DesignHeight="300" d:DesignWidth="400"> <StackPanel x:Name="LayoutRoot" Background="White"> <TextBox Margin="5" TabIndex="0"></TextBox> <CheckBox Margin="5" TabIndex="1" Content="CheckBox Test"></CheckBox> <TextBox Margin="5" TabIndex="2"></TextBox> <ComboBox Margin="5" TabIndex="3"> <ComboBox.Items> <ComboBoxItem Content="ComboBox Test 11"></ComboBoxItem> <ComboBoxItem Content="ComboBox Test 22"></ComboBoxItem> </ComboBox.Items> </ComboBox> <TextBox Margin="5" TabIndex="4"></TextBox> <RadioButton Margin="5" Content="Radio Test" TabIndex="5"></RadioButton> <TextBox Margin="5" TabIndex="6"></TextBox> </StackPanel> </UserControl>
CS后端代码:
using System; using System.Collections.Generic; using System.Linq; using System.Net; using System.Windows; using System.Windows.Controls; using System.Windows.Documents; using System.Windows.Input; using System.Windows.Media; using System.Windows.Media.Animation; using System.Windows.Shapes; namespace tab_key_test { public partial class MainPage : UserControl { List<Control> allInputControls = new List<Control>(); public MainPage() { InitializeComponent(); this.Loaded += MainPage_Loaded; } void MainPage_Loaded(object sender, RoutedEventArgs e) { //把界面上的TextBox,RadioButton,ComboBox,CheckBox都加入列表 //注:一般业务录入界面上只有这4种类型的输入控件,如果还有其实类型,可自行扩展 allInputControls.AddRange(FindChildren<TextBox>(LayoutRoot).Cast<Control>()); allInputControls.AddRange(FindChildren<RadioButton>(LayoutRoot).Cast<Control>()); allInputControls.AddRange(FindChildren<ComboBox>(LayoutRoot).Cast<Control>()); allInputControls.AddRange(FindChildren<CheckBox>(LayoutRoot).Cast<Control>()); //按TabIndex排序 allInputControls = allInputControls.OrderBy(c => c.TabIndex).ToList(); foreach (Control c in allInputControls) { c.KeyDown += EnterKeyDownToTab; if (c is ComboBox) { //ComboBox要特殊处理 (c as ComboBox).DropDownClosed += DropDownClosedToNext; } } } void EnterKeyDownToTab(object sender, KeyEventArgs e) { if (e.Key == Key.Enter) { GoToNextControl(sender); } } void GoToNextControl(object sender) { var self = sender as Control; if (self == null) { return; } var selfTabIndex = self.TabIndex; //找出下一个控件 var nextControl = allInputControls.FirstOrDefault(c => c.TabIndex > selfTabIndex); if (nextControl != null) { nextControl.Focus(); } else { allInputControls[0].Focus();//最后一个控件时,再跳到第一个(可选处理) } } /// <summary> /// 查找所有子元素(递归) /// </summary> /// <typeparam name="T"></typeparam> /// <param name="parent"></param> /// <returns></returns> public static IEnumerable<T> FindChildren<T>(DependencyObject parent) where T : class { int count = VisualTreeHelper.GetChildrenCount(parent); if (count > 0) { for (int i = 0; i < count; i++) { DependencyObject child = VisualTreeHelper.GetChild(parent, i); var t = child as T; if (t != null) yield return t; IEnumerable<T> children = FindChildren<T>(child); foreach (T item in children) yield return item; } } } private void DropDownClosedToNext(object sender, EventArgs e) { GoToNextControl(sender); } } }
这个思路还可以应用到html网页上:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>Enter Key Replace Tab</title> <script type="text/javascript" src="http://lib.sinaapp.com/js/jquery/1.6/jquery.min.js"></script> <style type="text/css"> input,select,textarea{ padding:0; margin:5px; width:150px; display:block; } </style> <script type="text/javascript"> $(document).ready(function(){ var inputs = $("input,textarea,select").sort(function(a,b){return a.tabIndex>b.tabIndex?1:-1}); inputs.each(function(){ $(this).keypress(function(e){ if (e.keyCode==13||e.which==13){ //修正textarea的多余回车问题(可选) //if ($(this).get(0).tagName == "TEXTAREA"){ // $(this).val($.trim($(this).val())); //}; var selfTabIndex = parseInt($(this).attr("tabIndex"),10); var nextInput = null; //找出下一个元素 for(var i=0; i<inputs.length; i++){ if (inputs[i].tabIndex > selfTabIndex){ nextInput = inputs[i]; break; } } if (nextInput != null){ nextInput.focus(); } else{ inputs[0].focus(); } } }).focus(function(){ $(this).select(); }) }) }) </script> </head> <body> <input type="text" tabindex="0" value="000"/> <input type="text" tabindex="1" value="111"/> <textarea tabindex="2">222</textarea> <input type="radio" tabindex="3" id="r3" style="width:20px;display:inline"/><label for="r3">333</label> <input type="text" tabindex="4" value="444"/> <input type="checkbox" tabindex="5" id="c5" style="width:20px;display:inline"/><label for="c5">555</label> <input type="text" tabindex="6" value="666"/> <select tabindex="7"> <option>777</option> <option>xxx</option> </select> <select size="2" tabindex="8"> <option>888</option> <option>yyy</option> </select> </body> </html>