文本字段(或文本框)是用户界面控件,允许用户将文本输入到程序中。
MapBox/MapLibre - “文本字段”:使用“文本字段”需要样式“字形”属性
当我尝试将标签添加到 Maplibre/mapbox 中的图层时,我遇到了这个问题。 evented.ts:112 错误:layers.parcelles_ly.layout.text-field:使用“text-field”需要样式“glyph...
BoxConstraints 在 minHeight 和 maxHeight 中具有 NaN 值
我正在使用响应式框架包。 出现这个问题: 构建 Container(Alignment.center,constraints) 时抛出以下断言: BoxConstraints(w=100.0, NaN<=h<...
在 SwiftUI 中将图像添加到 TextField/SecureField,为占位符文本添加填充
我在 SwiftUI 中创建了一个文本字段和一个安全文本字段,但我不知道如何将图像添加到 SwiftUI 中的文本字段/安全文本字段中。 SwiftUI 的在线文档并不多,例如......
我有以下简化代码: 导入 SwiftUI 结构ContentView:视图{ @FocusState private var isFocused: Bool @State private var text: String = "" @国家私有变量
所以我有一个类,其中包含一个名为keyboardHeight的已发布变量,用于检索keyboardHeight的值: 类 KeyboardHeightHelper: ObservableObject { @已发布的变量
我正在创建一个电子邮件字段,我想避免或自动删除其中的前导和尾随空格。 我尝试使用 myTextFieldController.addListener(() { myTextFieldController.text =
如何确保 TextField 最多接受 255 个字符并在超出时显示警告?
我希望这个来自 Macial UI 文本字段的 TextField 组件具有 我想要这个来自 Macial UI Text Field 的 TextField 组件 <TextField value={value} label='Ana iş Adımı' multiline onChange={onChange} placeholder=' ' error={Boolean(errors.definition)} aria-describedby='validation-basic-definition' sx={{ mb: 2, backgroundColor: isUpdateMode && '#EBF3F7', rounded: 4 }} /> 最大长度为 255 个字符。如果超过 255 个字符的限制,我希望在下面显示一条红色警告消息,如下图所示:pic,但我不想只包含 <TextField ... inputProps={{ maxLength: 255 }} /> 到文本字段,因为它不显示红色警告消息。它仅强制执行字符限制。我的整个页面是: import React, {useEffect, useState} from "react"; import Grid from "@mui/material/Grid"; import Typography from "@mui/material/Typography"; import Box from "@mui/material/Box"; import Tooltip from "@mui/material/Tooltip"; import IconButton from "@mui/material/IconButton"; import Icon from "../../../@core/components/icon"; import {Controller, useForm} from "react-hook-form"; import restClient from "../../../rest/client"; import mappings from "../../../mappings/mapping"; import toast from "react-hot-toast"; import Card from "@mui/material/Card"; import CardHeader from "@mui/material/CardHeader"; import CardContent from "@mui/material/CardContent"; import FormControl from "@mui/material/FormControl"; import TextField from "@mui/material/TextField"; import FormHelperText from "@mui/material/FormHelperText"; import InputLabel from "@mui/material/InputLabel"; import Select from "@mui/material/Select"; import MenuItem from "@mui/material/MenuItem"; import Button from "@mui/material/Button"; import { DataGrid, gridPageCountSelector, GridPagination, GridToolbarContainer, GridToolbarExport, GridToolbarFilterButton, GridToolbarQuickFilter, useGridApiContext, useGridSelector } from "@mui/x-data-grid"; import DeleteDialog from "../../../views/components/company/DeleteDialog"; import MuiPagination from "@mui/material/Pagination"; import secureLocalStorage from "react-secure-storage"; const defaultValues = { id: '', definition: '', orderNo: '', companyRequest: null, }; function CustomToolbar() { return ( <GridToolbarContainer> <GridToolbarQuickFilter/> </GridToolbarContainer> ); } function Pagination({page, onPageChange, className}) { const apiRef = useGridApiContext(); const pageCount = useGridSelector(apiRef, gridPageCountSelector); return ( <MuiPagination color="warning" className={className} count={pageCount} page={page + 1} onChange={(event, newPage) => { onPageChange(event, newPage - 1); }} /> ); } function CustomPagination(props) { return <GridPagination ActionsComponent={Pagination} {...props} />; } const CompanyJobDescription = () => { const [companyJobDescriptionLList, setCompanyJobDescriptionList] = useState([]); const [selectedId, setSelectedId] = useState(); const [openDelete, setOpenDelete] = useState(false); const [isUpdateMode, setIsUpdateMode] = useState(false); const { control, handleSubmit, formState: { errors }, reset, setValue, watch: valueWatch } = useForm({ defaultValues, }); const columns = [ { flex: 0.01, minWidth: 100, headerName: 'S.N', field: 'orderNo', renderCell: (params) => ( <Typography variant="body2" sx={{ color: 'text.primary' }}> {params.row.orderNo} </Typography> ) }, { flex: 1, minWidth: 200, field: 'definition', headerName: 'Ana İş Adımı', renderCell: (params) => ( <Typography variant="body2" sx={{ color: 'text.primary', whiteSpace: 'pre-wrap', overflow: 'auto', maxHeight: '50px', pt: 1 }} > {params.row.definition} </Typography> ) }, { flex: 0.05, minWidth: 140, field: 'actions', headerName: 'İşlemler', renderCell: (params) => { const id = valueWatch("id"); return ( <Box sx={{ display: 'flex', alignItems: 'center' }}> <Tooltip title="Düzenle"> <IconButton size="small" color="warning" sx={{ mr: 0.5 }} onClick={() => updateJobDescription(params)} > <Icon icon="mi:edit" /> </IconButton> </Tooltip> <Tooltip title="Sil"> <IconButton size="small" color="error" onClick={() => showDeleteModal(params)} > <Icon icon="mdi:delete-outline" /> </IconButton> </Tooltip> {id === params.row.id && ( <Tooltip title='Güncellemeyi İptal Et'> <IconButton size='small' color="error" onClick={resetForm}> <Icon icon='material-symbols:cancel-outline' /> </IconButton> </Tooltip> )} </Box> ); } } ]; const handleConfirmDelete = () => { deleteCompanyJobDescription(selectedId); setOpenDelete(false); }; const updateJobDescription = params => { const { id, definition, orderNo } = params.row; setValue('id', id); setValue('orderNo', orderNo); setValue('definition', definition); setIsUpdateMode(true); // Güncelleme modunu etkinleştir }; const showDeleteModal = (params) => { setSelectedId(params.row.id); setOpenDelete(true); }; const deleteCompanyJobDescription = (selectedId) => { restClient.delete(mappings.companyJobDescription.deleteCompanyJob(selectedId)).then(() => { getCompanyJobDescription(); setOpenDelete(false); toast.success("Görev Tanımı başarıyla silindi."); }).catch(() => { toast.error("Görev Tanımı silinirken hata oluştu."); }); }; const getCompanyJobDescription = () => { const company = JSON.parse(secureLocalStorage.getItem("companyInfo")); restClient.get(mappings.companyJobDescription.getCompanyJobDescriptionByCompanyId(company?.id)).then(res => { setCompanyJobDescriptionList(res.data.data); }); }; useEffect(getCompanyJobDescription, []); const onSubmit = (companyJobDescription) => { companyJobDescription.companyRequest = JSON.parse(secureLocalStorage.getItem("companyInfo")); const isOrderNoUnique = !companyJobDescriptionLList.some( (item) => item.orderNo === parseInt(companyJobDescription.orderNo) && item.id !== companyJobDescription.id ); if (!isOrderNoUnique) { toast.error("Bu sıra numarası zaten mevcut. Lütfen farklı bir sıra numarası girin."); return; } restClient.post(mappings.companyJobDescription.addCompanyJobDescription(), companyJobDescription) .then(() => { toast.success("Görev Tanımı başarıyla kaydedildi."); getCompanyJobDescription(); resetForm(); }).catch((error) => { console.error("Görev Tanımı oluşturulurken bir hata oluştu: ", error); toast.error("Görev Tanımı oluşturulurken hata oluştu."); }); }; const resetForm = () => { reset(); setIsUpdateMode(false); // Güncelleme modunu kapat }; return ( <> <Card sx={{ mb: 2 }}> <CardHeader sx={{ mb: 0 }} title="Görev Tanımı Jenerik Maddeleri Ekle" avatar={ <IconButton> <Icon icon={isUpdateMode ? 'mi:edit' : 'mdi:plus'} /> </IconButton> } /> <CardContent> <Grid sx={{ pb: 5 }}> <form onSubmit={handleSubmit(onSubmit)}> <Grid container spacing={5}> <Grid item xs={12} sm={12}> <FormControl fullWidth> <Controller name='orderNo' control={control} rules={{ required: true }} render={({ field: { value, onChange } }) => ( <TextField value={value} label='Sıra Numarası' onChange={onChange} placeholder=' ' error={Boolean(errors.orderNo)} aria-describedby='validation-basic-orderNo' sx={{ mb: 2, backgroundColor: isUpdateMode && '#EBF3F7', rounded: 4 }} /> )} /> {errors.orderNo && ( <FormHelperText sx={{ color: 'error.main' }} id='validation-basic-orderNo'> Bu alan zorunlu. </FormHelperText> )} </FormControl> </Grid> <Grid item xs={12} sm={12}> <FormControl fullWidth> <Controller name='definition' control={control} rules={{ required: true }} render={({ field: { value, onChange } }) => ( <TextField value={value} label='Ana iş Adımı' multiline onChange={onChange} placeholder=' ' error={Boolean(errors.definition)} aria-describedby='validation-basic-definition' sx={{ mb: 2, backgroundColor: isUpdateMode && '#EBF3F7', rounded: 4 }} /> )} /> {errors.definition && ( <FormHelperText sx={{ color: 'error.main' }} id='validation-basic-definition'> Bu alan zorunlu. </FormHelperText> )} </FormControl> </Grid> <Grid item xs={12} sm={12} sx={{ display: 'flex' }}> <Button fullWidth size='large' type='submit' variant='contained'> {isUpdateMode ? "Güncelle" : "Kaydet"} </Button> </Grid> </Grid> </form> </Grid> <Box sx={{ height: 700 }}> <DataGrid columns={columns} rowsPerPageOptions={[7, 10, 25, 50]} rows={companyJobDescriptionLList} sortModel={[ { field: 'orderNo', sort: 'asc', }, ]} slots={{ toolbar: CustomToolbar, pagination: CustomPagination, }} pagination getRowHeight={() => "auto"} /> </Box> </CardContent> </Card> <DeleteDialog onConfirm={handleConfirmDelete} open={openDelete} setOpen={setOpenDelete} /> </> ); } export default CompanyJobDescription; <script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.3.1/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.3.1/umd/react-dom.production.min.js"></script> 我是 stackoverflow 的新用户。如果我在提问时犯了错误,我深表歉意。 你可以做类似的事情 ... const [text, setText] = useState(""); const [error, setError] = useState(false); const handleChange = (event) => { const value = event.target.value; if (value.length <= 255) { setText(value); setError(false); } else { setError(true); } }; ... return ( ... <TextField ... value={value} onChange={handleChange} error={error} /> {error && ( <Typography variant="caption" color="error"> Maximum character limit is 255 </Typography> )}
对于 Jetpack Compose 文本字段,如何显示数字键盘但仍允许用户切换到字母?
我的 ID 输入在 99% 的情况下只是数字,因此用户使用数字键盘是最舒服的。然而有时他们可能需要包括其他
我想问一个小问题。 事实上,我想自定义在文本区域或文本字段中右键单击时出现的菜单。 我的目标是保留基本菜单(复制、粘贴...
创建圆形 TextField 时,QML 文本不在 TextField 的中心
以下代码创建圆角TextField 文本字段{ id: 用户名文本字段 placeholderText: qsTr("用户名") 宽度:250 身高:40 锚点{ 顶部:括号...
我想在 SwiftUI 中制作一个 TextField,根据内容动态调整其宽度,而不添加额外的间距。 TextField 是具有多个文本视图的 HStack 的一部分,我的目标......
Android Jetpack Compose 无法更改 BasicTextField 光标拇指颜色
目前我正在使用android jetpack 撰写BasicTextField。当我更改光标颜色时,我希望光标手柄也会更改为相同的颜色。但事实证明有差异...
如何添加可拖动的“文本字段”以在 flutter 中的图像上添加文本?
我正在flutter中创建一个Meme生成器应用程序..我只需要知道是否有一种方法可以让用户本身在图像上添加文本并将该文本拖动到图像区域中的任何位置...以便图片
即使在文本字段中输入文本,我也希望提示文本保留: 但是如果我以简单的方式给 TextField 一些类似“hintText:”的东西,当 TextField 输入时提示文本就会消失......
作为绑定传递到 .sheet 上显示的 TextField 时,如何让 @FocusState 属性发挥作用?
我有以下简单的代码,它将一个按钮放置在视图上,并在点击时在 .sheet 上显示一个文本字段: 结构 TestView:视图 { @State private varsheetIsPresented:Bool = false @
当 TextField 位于 .sheet 上时,如何让 @FocusState 属性发挥作用
我有以下简单的代码,它将一个按钮放置在视图上,并在点击时在 .sheet 上显示一个文本字段: 结构 TestView:视图 { @State private varsheetIsPresented:Bool = false @
有人可以帮助我了解沙特 iqama/国民身份证号码的现场验证标准吗? 我知道对于国民来说,它应该以 1 开头,而对于外籍人士来说,它应该以 2 开头,然后
我尝试使用 KeyboardType: TextInputType.visiblePassword 创建一个 TextField 来禁用预测文本,但我无法转到新行,因为它是一个提交按钮。我尝试添加文本输入...
Android 工作室 Bumblebee 2021.1.1 我只是想做的就是从 edittext 字段获取或检索文本输入,无论我怎么做,它都不起作用。我到处找过,包括
如何将scriplet生成的日期设置为<s:textfield>中的默认值?
我的 JSP 中有这个 scriplet,我希望它以某种方式作为默认值包含在我的 中。 <%java.text.DateFormat df = new java.text.SimpleDateFormat("yyyy/MM/dd"...