专栏首页菩提树下的杨过Silverlight:用Enter键替换Tab键切换焦点

Silverlight:用Enter键替换Tab键切换焦点

业务系统中,很多录入人员习惯于用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>

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • silverlight动态读取txt文件/解析json数据/调用wcf示例

    终于开始正式学习silverlight,虽然有点晚,但总算开始了,今天看了一下sdk,主要是想看下silverlight中如何动态调用数据,对于数据库的访问,s...

    菩提树下的杨过
  • (Head First 设计模式)学习笔记(1)

    把书中开篇duck问题的代码翻译成了c#版: 概述: 某游戏公司要设计一款鸭子的游戏,里面有各种各样的鸭子,有些会飞,有些会叫,但都会游泳。而且不同种类的鸭子...

    菩提树下的杨过
  • c#:使用using关键字自动释放资源未必一定就会有明显好处

    记录这篇文章的灵感来源来自今天下班前与同事的小小争论,我现在开发的一个项目中,有这样一段代码: public string ToXML() { ...

    菩提树下的杨过
  • 高并发利器-guava分流与缓存

    有个场景,接口请求获取数据频繁,但数据改动量小,一般情况是先去redis取,没有则从数据库取,再放入redis,返回?为了加快系统的响应速度,我们可以在内存加...

    SAnBlog
  • (整理Linux书签)——Vim命令的使用

    版权声明:本文为博主原创文章,遵循 CC 4.0 by-sa 版权协议,转载请附上原文出处链接和本声明。

    张凝可
  • 关于 RTL8723BS 同时开启 STA/AP 模式

    最近接到一个调试 wifi 驱动的任务,使用的是 rtl8723bs 芯片组。要求是让无线设备工作在 station 模式的时候同时开启一个 ap 热点。简单来...

    RainMark
  • 如何利用日志来监控和限制PowerShell攻击活动

    写在前面的话 近期,我一直在我客户的网络环境中分析PowerShell攻击,根据我的分析以及研究结果,我发现了几种方法来帮助研究人员检测潜在的PowerShel...

    FB客服
  • [打造自己的监控系统]让Django运行自定义命令

    前面介绍了如何利用Python搭建一个网站并且介绍了如何在其中执行Oracle命令并在前端显示出来

    bsbforever
  • SAP最佳业务实践:FI–应收帐款(157)-5 FB75贷项凭证

    4.6 根据发票过帐贷项凭证 如果销售与分销模块在实施范围内,请执行步骤 根据销售与分销模块发票过帐贷项凭证。这样就确保了销售与分销模块和财务/控制会计之间的整...

    SAP最佳业务实践
  • 【程序猿硬核科普】Java获取指定时间年月日 | 时间戳转换bug你的项目中招了吗 | yyyy和YYYY的区别

    最近在知乎看到有篇回答说:跨年导致日期格式YYYY和yyyy导致日期显示Bug的帖子,微信公众号、一些论坛好多中招了,快来看看你的项目里面有没有这个bug吧,哈...

    浩Coding

扫码关注云+社区

领取腾讯云代金券