placeholder 相关问题

HTML5占位符属性指定描述输入字段的预期值的简短提示（例如，样本值或预期格式的简短描述）。当提示为空时，提示将显示在输入字段中，当字段获得焦点时，提示将消失。

我可以知道在将占位符加载到 Glide 时是否可以使用任何方法来执行某些操作吗？在这里，我使用 Glide 将 firebase 图像 url 设置为 setBitmap 方法。如果资源可用

android firebase android-glide placeholder

回答 4 投票 0

示例http://dabblet.com/gist/5859946 如果占位符很长，则默认情况下输入的显示宽度不足以显示所有占位符文本。例如示例 http://dabblet.com/gist/5859946 如果占位符很长，默认情况下输入的显示宽度不足以显示所有占位符文本。例如 <input placeholder="Please enter your name, address and shoe size"> 在不设置固定宽度，最好没有javascript的情况下，可以设置输入显示所有占位符文本吗？这只能通过 javascript 通过设置 size = 占位符长度来完成： input.setAttribute('size',input.getAttribute('placeholder').length); 这是一个针对所有输入进行剂量调整的代码： http://jsfiddle.net/KU5kN/ 以防万一有人想将其与 jQuery 一起使用，该代码如下。另外，如果接受的答案中不存在 placeholder 属性，您将收到错误，这在下面的 jQuery 示例中也得到了处理。 $("input[placeholder]").each(function () { $(this).attr('size', $(this).attr('placeholder').length); }); 我采用了 Avner Solomon 的解决方案，如上述部分之一的评论中所提议的。您需要一个 div 元素来包裹 input 和另一个包含您的标签的 div 元素： <div class="input-container">  <div class="input-hidden-label" aria-hidden="true"> Your placeholder text </div> <input class="input" type="text" placeholder="Your placeholder text"/> </div> 假设 input-hidden-label 和 input 的字体样式相同，您将在输入旁边看到一行文本。文本将与输入的长度相同，增加或减少几个像素。然后您可以应用这些样式： .input-container { display: inline-block; margin-bottom: 2em; } .input { display: inline; width: 100%; font-size: 16px; font-family: Times; } .input-hidden-label { height: 0; visibility: hidden; } 这会通过提供 height: 0 并删除 visibility 来隐藏标签。但是，width仍然存在。包含 div 和标签的 input 与其最长子项的 width 匹配。如果您随后将 input 设置为 width: 100%，它将与父级宽度匹配，而父级宽度已经与占位符匹配。看到这个小提琴。注意事项这个想法不太容易理解，这个解决方案也不是很容易理解。您应该为输入添加标签，而不是依赖占位符本身作为标签。我想到的解决方法：创建一个与占位符具有相同文本的 span 元素。测量跨度元素的宽度。将输入设置为 span 元素的宽度。隐藏跨度元素。显示none不行，请使用其他方法。 http://jsfiddle.net/Timar/cwLp3rbo/ var input = document.getElementById('input-1'); // measure width of same text as placeholder var placeholder = document.getElementById('input-1-placeholder'); input.style.width = placeholder.offsetWidth + "px"

css html placeholder

回答 4 投票 0

NextJS 14 中用于视频加载的图像占位符

我有下一个js 14项目。我有三个滑块视频。我用的是swiper js。在第一张幻灯片上，视频有时需要一些时间才能加载，它显示红色背景图像。我正在尝试放置图像占位符

image next.js swiper.js placeholder

回答 1 投票 0

CKeditor 5（在线构建器）坚持在文本字段中包含占位符

使用 CKeditor v5 在线构建器的默认设置，它可以工作，但我有一个小挑战。文本区域坚持在区域内包含占位符文本。我已经调查过

placeholder ckeditor5

回答 4 投票 0

如何在 <input> 元素内创建标签？

我想在输入元素中插入描述性文本，当用户单击它时该描述性文本会消失。我知道这是一个很常见的技巧，但我不知道该怎么做。最简单的是什么/

html forms label placeholder

回答 15 投票 0

将包含点分隔值的大括号占位符替换为二维数组中的值

我有一段文字，例如： $paragraph = "你好{Customer.name}, 您今年 {Customer.age} 岁。您出生于 {Customer.birthdate} 年”；我想用

php regex templates replace placeholder

回答 3 投票 0

Laravel Filament v3.1 和 Carbon 如何动态更新 PlaceHolder 内容

我想计算持续时间来衡量两个输入字段之间的时间差异。并将结果传递给占位符。我有一个 Laravel 10.x，在表单构建上使用Fisher PHP 3.1...

placeholder formbuilder laravel-10 laravel-filament filamentphp

回答 1 投票 0

如何向 UITextView 添加占位符文本，但在所有情况下（即使更改操作系统）都与文本定位完全匹配？

正如标题所说 - 向 UITextView 添加占位符很简单。只需使用 .textDidChangeNotification 并添加 CATextLayer 甚至只是 UILabel。问题是：绝对，完全，明确...

ios swift uitextview placeholder

回答 1 投票 0

如何在Flask中获取占位符的输入

这是我在flask中的代码的一部分，用Python编写 ...输出+= ''' 记录更改记录... 这是我在 Flask 中用 Python 编写的代码的一部分 ...output += '''<div class = recsettings> Recording <div class = recduration> change recording duration here <form method ='POST'> <input placeholder = 'duration' name='duration' id ='duration'> <---HERE <button type ='submit' action ='/duration'>Submit</button> </form>...''' 我现在想在另一种方法中单击提交时获取占位符的输入。重定向到 /duration 显然不起作用，也不知道如何修复它 @app.route('/duration', methods=['GET', 'POST']) def duration(): tst = request.form.get("placeholder"); <---- Something like this print (tst) return redirect(url_for('settings')) 必须没有php 我能够使用 Flask-WTF 表单访问占位符值。有一个名为 render_kw 的属性保存占位符值。 @app.route('/formz') def formz(): form = MyForm() print(form.some_field.render_kw) # <=== property with the placeholder value return render_template('formz.html', form=form) 这里是更多上下文的表单类 from flask_wtf import FlaskForm from wtforms import StringField from wtforms.validators import DataRequired class MyForm(FlaskForm): name = StringField('name', validators=[DataRequired()]) some_field = StringField('abc', render_kw={"placeholder": "testomondo"}) 以及加载路线时的控制台输出 $ python -m flask --app run run * Serving Flask app 'run' * Debug mode: off WARNING: This is a development server. Do not use it in a production deployment. Use a production WSGI server instead. * Running on http://127.0.0.1:5000 Press CTRL+C to quit {'placeholder': 'testomondo'} 127.0.0.1 - - [05/Mar/2024 15:25:49] "GET /formz HTTP/1.1" 200 - 因此，即使您要查看请求对象，也只需深入到表单并访问 render_kw 属性！希望这有帮助！

python html flask placeholder

回答 1 投票 0

为所有必填字段添加“必填”占位符文本（Angular Material）

我试图为所有“必需”属性设置为 true 的输入字段显示一个澄清的“必需”占位符文本。所以基本上是一样的 <

html angular input angular-material placeholder

回答 1 投票 0

Markdown 中文本片段的占位符变量

我正在尝试编写一个 Markdown 文档，其中包含类似集中指定的占位符变量的内容，该变量允许将某个文本片段传播到文档的不同位置...

variables text replace markdown placeholder

回答 2 投票 0

替换 Markdown 文本中的占位符（变量）的最简单方法？

我需要一种开放格式来以通用方式（使用占位符/变量）编写故事。为了使故事具体化，我想设置一个键/值对列表，并在

markdown placeholder pandoc

回答 4 投票 0

将占位符添加到密码c# winforms的文本框控件

如何给c# winform控件添加占位符？当控件失去焦点并且控件文本为空时，我希望出现占位符。当文本框为 UsePasswordChar true 时，它仍然显示

c# winforms textbox placeholder

回答 4 投票 0

如何使用表单提交的绑定值设置InputText的占位符？

我正在尝试为 Blazor 构建一个输入文本，如果技能尚未为空，则它会保留一个占位符，因此会创建为新技能，因为我想使用相同的剃刀组件进行编辑和创建新技能...

c# .net input blazor placeholder

回答 2 投票 0

这段代码有什么问题？我在这段代码中遇到问题

a = float(input("请输入第一个数字：")) b = float(input("请输入第二个数字：")) print('{first} 和 {sec} 的乘积为：',a*b).format(first = a, sec = b) print('{

python placeholder

回答 1 投票 0

显示输入类型日期的占位符文本

占位符不适用于直接输入类型日期和日期时间本地。占位符不适用于直接输入类型 date 和 datetime-local。 <input type="date" placeholder="Date" /> <input type="datetime-local" placeholder="Date" /> 该字段在桌面上显示 mm/dd/yyy，而在移动设备上则不显示任何内容。如何显示 Date 占位符文本？使用onfocus="(this.type='date')"，例如： <input required="" type="text" class="form-control" placeholder="Date" onfocus="(this.type='date')"/> 使用onfocus和onblur...这是一个例子： <input type="text" placeholder="Birth Date" onfocus="(this.type='date')" onblur="if(this.value==''){this.type='text'}"> 在这里，我尝试了 data 元素中的 input 属性。并使用 CSS 应用所需的占位符 <input type="date" name="dob" data-placeholder="Date of birth" required aria-required="true" /> input[type="date"]::before { content: attr(data-placeholder); width: 100%; } /* hide our custom/fake placeholder text when in focus to show the default * 'mm/dd/yyyy' value and when valid to show the users' date of birth value. */ input[type="date"]:focus::before, input[type="date"]:valid::before { display: none } <input type="date" name="dob" data-placeholder="Date of birth" required aria-required="true" /> 希望这有帮助 <input type="text" placeholder="*To Date" onfocus="(this.type='date')" onblur="(this.type='text')" > 这段代码对我有用。只需使用这个即可对于 Angular 2，你可以使用这个指令 import {Directive, ElementRef, HostListener} from '@angular/core'; @Directive({ selector: '[appDateClick]' }) export class DateClickDirective { @HostListener('focus') onMouseFocus() { this.el.nativeElement.type = 'date'; setTimeout(()=>{this.el.nativeElement.click()},2); } @HostListener('blur') onMouseBlur() { if(this.el.nativeElement.value == ""){ this.el.nativeElement.type = 'text'; } } constructor(private el:ElementRef) { } } 并像下面一样使用它。 <input appDateClick name="targetDate" placeholder="buton name" type="text"> 对于 React，你可以这样做。 const onDateFocus = (e) => (e.target.type = "datetime-local"); const onDateBlur = (e) => (e.target.type = "text"); . . . <input onFocus={onDateFocus} onBlur={onDateBlur} type="text" placeholder="Event Date" /> 我是这样做的： var dateInputs = document.querySelectorAll('input[type="date"]'); dateInputs.forEach(function(input) { input.addEventListener('change', function() { input.classList.add('no-placeholder') }); }); input[type="date"] { position: relative; } input[type="date"]:not(.has-value):before { position: absolute; left: 10px; top: 30%; color: gray; background: var(--primary-light); content: attr(placeholder); } .no-placeholder:before{ content:''!important; } <input type="date" name="my-date" id="my-date" placeholder="My Date"> 现代浏览器使用 Shadow DOM 来方便输入日期和日期时间。因此，除非浏览器出于某种原因选择回退到 text 输入，否则不会显示占位符文本。您可以使用以下逻辑来适应这两种情况： ::-webkit-calendar-picker-indicator { @apply hidden; /* hide native picker icon */ } input[type^='date']:not(:placeholder-shown) { @apply before:content-[attr(placeholder)]; @apply sm:after:content-[attr(placeholder)] sm:before:hidden; } input[type^='date']::after, input[type^='date']::before { @apply text-gray-500; } 我使用了 Tailwind CSS 语法，因为它很容易理解。让我们一点一点地分解它： ::-webkit-calendar-picker-indicator { @apply hidden; /* hide native picker icon */ } 使用其 Shadow DOM 伪元素选择器隐藏本机选择器图标（通常是日历）。 input[type^='date']:not(:placeholder-shown) { @apply before:content-[attr(placeholder)]; @apply sm:after:content-[attr(placeholder)] sm:before:hidden; } 选择所有未显示占位符的 date 和 datetime-local 输入，并且：默认使用 placeholder 伪元素显示输入 ::before 文本在小屏幕及以上屏幕上切换为使用 ::after 伪元素 input[type^='date']::after, input[type^='date']::before { @apply text-gray-500; } 设置 ::before 和 ::after 伪元素的样式。

html date placeholder

回答 8 投票 0

如何在js中获取占位符值[关闭]

如何在javascript中获取占位符的值我不希望 JQuery 获取该值谁能告诉我如何得到它

javascript placeholder

回答 2 投票 0

数据加载太快时骨架加载器会闪烁

我正在使用 Vue 3，我尝试在加载数据时为占位符实现一个骨架加载器，如果我在浏览器的“网络”选项卡中打开限制，我可以看到它的工作原理。然而，当

javascript vuejs3 fetch-api placeholder

回答 1 投票 0

数字输入占位符不起作用（JS）

我想为我的输入添加类型编号的占位符。这不起作用，我该如何修复它？谢谢我尝试使用另一种类型，例如日期，但这不是我想要的结果。我想要那个...