WPF例2-一个文本框实时显示另一个文本框的内容

Posted 2023-05-06

参考技术A 一、从工具箱中拖入两个TextBox，x:Name属性分别设置为tb1、tb2，然后在tb1中设置Text属性绑定到tb2的Text属性。

二、单击“启动”，在上面的文本框中输入文本，下面的文本框实时显示。

JavaScript+html显示隐藏文本框的内容

【案例分析】本案例需要为一个文本框添加提示文本。当单击文本框时，里面的默认提示文字会隐藏，鼠标指针离开文本框，里面的文字会显示出来。

效果图如下：

当未单击文本框时：

当单击文本框时：

实现步骤如下：

1、为元素绑定获取文本框焦点事件onfocus和失去焦点事件onblur
2、如果获取焦点时，需要判断表单里面的内容是否为默认文字；如果是默认文字，就清空表单内容
3、如果失去焦点，需要判断表单内容是否为空；如果为空，则表单里边的内容改为默认文字

html页面中代码如下：

    <input type="text" id="userName" value="手机" style="color: #999;">
    <script>
        //1.获取元素：input
        var text = document.querySelector('input');
        //2.给元素注册获取焦点的事件：onfoucs
        text.onfocus = function () 
            if (this.value === '手机') 
                this.value = '';
            
            this.style.color = '#333';
        
        //3.给元素注册失去焦点的事件：onblur
        text.onblur = function () 
            if (this.value === '') 
                this.value = '手机';
            
            this.style.color = '#999';
        
    </script>