uniGUI之UniEdit

@zheng

已于 2022-06-06 17:48:28 修改

阅读量822

点赞数 1

分类专栏： UniGUI 文章标签： css javascript delphi

于 2022-06-06 16:10:53 首次发布

本文链接：https://blog.csdn.net/zheng52617/article/details/125148578

版权

UniGUI 专栏收录该内容

14 篇文章

订阅专栏

这篇博客详细介绍了如何使用UniEdit控件进行属性设置，包括设置背景文字、启用清空按钮、设置左侧文本及对齐方式、响应回车事件、实现必填验证、限制数字输入以及添加阴影效果。这些设置有助于提升用户界面的友好性和功能性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

UniEdit的属性设置

1.背景文字

代码如下（示例）：

UniEdit1.EmptyText:='背景文字';

在这里插入图片描述

2.清空按钮

代码如下（示例）：

UniEdit1.ClearButton:=true;

在这里插入图片描述

3.左边显示文本

代码如下（示例）：

uniEdit1.FieldLabel:='姓名';        //文本值
uniEdit1.FieldLabelAlign:=laRight;  //靠右显示
//uniEdit1.FieldLabelSeparator:=':';//分隔符，默认为 :  可以不设置
uniEdit1.FieldLabelWidth:=40        //文本宽度

在这里插入图片描述

4.回车触发

代码如下（示例）：

CharEOL:=#13
procedure TMainForm.UniEdit1KeyPress(Sender: TObject; var Key: Char);
begin
  UniMemo1.Lines.Add(UniEdit1.Text);
end;
//等价于,例子D:Program FilesFMSoftFrameworkuniGUIDemosDesktopAllFeaturesDemo Form Controls/CharEOL procedure TMainForm.UniEdit1KeyPress(Sender: TObject; var Key: Char);
begin
  if   (Key = #13) then    begin
     UniMemo1.Lines.Add(UniEdit1.Text);
  end; 
end;

在这里插入图片描述

5.必填显示

代码如下（示例）：

function beforeInit(sender, config)
{  
Ext.apply(sender,{allowBlank:false,vtype:'',msgTarget : 'side'});
}

红框显示

代码如下（示例）：

UniSession.AddJS(UniEdit1.JSName+ '.el.setStyle({"border": "solid 2px Red"});');

在这里插入图片描述

代码如下（示例）：

6.限制数字输入

在这里插入图片描述
代码如下（示例）：

var ok =
        event.keyCode == 8 || //backspace
        event.keyCode == 9 || //tab
        event.keyCode == 13 || //enter  
        event.keyCode >= 35 && event.keyCode <= 37 || //end, home, left arrow 
        event.keyCode == 39 || //right arrow, downd arrow, insert, delete
        event.keyCode == 45 || //insert
        event.keyCode == 46 || //delete
        event.keyCode >= 96 && event.keyCode <= 105 || // 0-9 on keypad
        event.keyCode >= 48 && event.keyCode <= 57; // 0-9
 
    if (!ok) {
        e.preventDefault();
    }

7.阴影显示

其他有焦点控件也生效
代码如下（示例）：

.x-form-text-wrap-focus{
    border-color: #66afe9;
    outline: 0;
    -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102,175,233,.6);
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102,175,233,.6); //8px为阴影大小
}

在这里插入图片描述

参考网址：点此访问