输入框显示文字垂直居中

第一种方法:

unit CenterEdit;

interface

uses
  Windows,
  Classes,
  Controls,
  SysUtils,
  Messages,
  StdCtrls,
  Forms,
  Graphics;

type
  TCenterEdit=class(TEdit)
  private
    FFontHeight:Integer;
    procedure CalcFontHeight;
  protected
    procedure CMFontChanged(var Message: TMessage); message CM_FONTCHANGED;
    procedure WMNCCalcSize(var Message:TWMNCCalcSize);message WM_NCCALCSIZE;
  public
    constructor Create(AOwner:TComponent);override;
  end;

procedure Register;

implementation

procedure Register;
begin
  RegisterComponents('SkinEngine',[TCenterEdit]);
end;

procedure SetWindowFrameChange(AWindowHandle:HWND);
begin
  SetWindowPos(
      AWindowHandle,
      0,
      0,
      0,
      0,
      0,
      SWP_FRAMECHANGED or SWP_NOMOVE or SWP_NOSIZE);
end;

{ TCenterEdit }

procedure TCenterEdit.CalcFontHeight;
var
  DC:HDC;
  Bitmap:TBitmap;
begin
  Bitmap:=TBitmap.Create;
  try
    Bitmap.Canvas.Font.Assign(Font);
    Self.FFontHeight:=Bitmap.Canvas.TextHeight('高度');
  finally
    Bitmap.Free;
  end;
end;

procedure TCenterEdit.CMFontChanged(var Message: TMessage);
begin
  inherited;
  CalcFontHeight;
  SetWindowFrameChange(Handle);
end;

constructor TCenterEdit.Create(AOwner: TComponent);
begin
  inherited Create(AOwner);
  CalcFontHeight;
end;

procedure TCenterEdit.WMNCCalcSize(var Message: TWMNCCalcSize);
var
  NCCalcSizeParams: PNCCalcSizeParams;
begin
  Inherited;
  if (BorderStyle<>bsNone) then
  begin
    NCCalcSizeParams:=Message.CalcSize_Params;
    Inc(NCCalcSizeParams.rgrc0.Top,(Height-FFontHeight) div 2 - 4);
    Dec(NCCalcSizeParams.rgrc0.Bottom,(Height-FFontHeight) div 2 - 4);
  end;
end;


end.

第二种方法:

unit Unit1;
 
interface
 
uses
  Windows, Messages, SysUtils, Variants, Classes, Graphics, Controls, Forms,
  Dialogs, StdCtrls;
 
type
  TEdit = class(StdCtrls.TEdit)
  protected
    procedure CreateParams(var Params: TCreateParams); override;
    procedure KeyPress(var Key: Char); override;
    procedure WMSize(var msg: TWMSize);message WM_SIZE;
    procedure SetParent(AParent: TWinControl);override;
    procedure SetCenter;
  end;
  TForm1 = class(TForm)
    Button1: TButton;
    Edit1: TEdit;
    procedure FormCreate(Sender: TObject);
    procedure Edit1KeyPress(Sender: TObject; var Key: Char);
  private
    { Private declarations }
  public
    { Public declarations }
     Edt: TEdit;
  end;
 
var
  Form1: TForm1;
 
implementation
 
{$R *.dfm}
 
procedure TForm1.Edit1KeyPress(Sender: TObject; var Key: Char);
begin
  if Key = #13 then
    ShowMessage('asdf');
end;
 
procedure TForm1.FormCreate(Sender: TObject);
begin
  Edt := TEdit.Create(self);
  Edt.Parent := self;
  Edt.AutoSize := False;
  Edt.Height := 50;
end;
 
{ TEdit }
 
procedure TEdit.CreateParams(var Params: TCreateParams);
begin
  inherited;
  Params.Style := Params.Style or ES_MULTILINE;
end;
 
procedure TEdit.KeyPress(var Key: Char);
begin
  inherited;
  if Key = #13 then
    key := #0;
end;
 
procedure TEdit.SetCenter;
var
 DC: HDC;
 SaveFont: HFont;
 Sin: Integer;
 SysMetrics, Metrics: TTextMetric;
 Rct: TRect;
begin
 DC := GetDC(0);
 GetTextMetrics(DC, SysMetrics);
 SaveFont := SelectObject(DC, Font.Handle);
 GetTextMetrics(DC, Metrics);
 SelectObject(DC, SaveFont);
 ReleaseDC(0, DC);
 if Ctl3D then Sin := 8 else Sin := 6;
 Rct := ClientRect;
 Sin := Height - Metrics.tmHeight - Sin;
 Rct.Top := Sin div 2;
 SendMessage(Handle, EM_SETRECT, 0, Integer(@Rct));
end;
 
procedure TEdit.SetParent(AParent: TWinControl);
begin
  inherited;
  if Parent <> nil then
  begin
    SetCenter;
  end;
 
end;
 
procedure TEdit.WMSize(var msg: TWMSize);
begin
  inherited;
  SetCenter;
end;
 
end.


在 Vue3 中配合 Vant UI,你可以使用 `<van-input>` 组件来创建这样一个会自动换行的文本输入框,并结合 CSS 实现文字限制、垂直居中以及高度自适应。这里是一个简单的示例: 首先,在组件模板中引入输入框并设置基本样式: ```html <template> <div class="custom-input"> <van-input v-model.trim="inputValue" placeholder="请输入内容" @input="checkInputLength"></van-input> </div> </template> ``` 然后,在 `script` 部分添加必要的数据属性和方法: ```js <script setup> import { ref } from 'vue'; const inputValue = ref(''); function checkInputLength(e) { if (e.target.value.length > 50 || e.target.value.split('\n').length * 10 > 50) { // 如果长度超限,清空输入并提示用户 e.target.value = ''; alert('输入过长,请控制在50个字符以内'); } } </script> ``` 接下来,定义 CSS 样式,包括换行和垂直居中的效果: ```css <style scoped> .custom-input { display: flex; align-items: center; /* 垂直居中 */ height: auto; /* 自适应高度 */ } .custom-input input { resize: none; /* 阻止上下滚动 */ overflow: hidden; /* 当内容超过宽度时隐藏多余部分 */ white-space: pre-wrap; /* 换行 */ word-break: break-all; /* 破单词换行 */ width: calc(100% - 4px); /* 减去边距以保证内边距均匀分布 */ padding: 8px; box-sizing: border-box; } </style> ``` 这样,当输入的文字超过十个汉字(每个汉字大概占两个字符的位置,所以是10*2=20字符),就会换行。同时,输入的内容会被限制在50个字符以内。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值