input 相关问题

如何将此静态文本放入输入表单中？它一直都在那里。这是我的代码：子域名：如何将此静态文本放入输入表单中？它一直都在那里。这是我的代码： <label for="subdomain">Subdomain:</label> <input type="text" placeholder="ExampleDomain" id="subdomain"/> 您可以通过以下方法实现此目的：将 <input> 放入 <label> 中，并带有 position:relative 给<label>一个带有::after的position:absolute伪元素将 box-sizing 的 <input> 设置为 border-box 给 <input> 一个 padding-right 等于 ::after 伪元素的宽度工作示例： label, input { position: relative; display: block; padding-right: 76px; width: 180px; box-sizing: border-box; } label::after { content: '.' attr(data-domain); position: absolute; top: 4px; left: 102px; font-family: arial, helvetica, sans-serif; font-size: 12px; display: block; color: rgba(0, 0, 0, 0.6); font-weight: bold; } <label data-domain="domain.com"> <input type="text" placeholder="exampledomain" /> <label> HTML <label for="subdomain">Subdomain:</label> <input type="text" placeholder="ExampleDomain" id="subdomain" /> <input type="text" id="subdomaintwo" value=".domain.com" disabled/> CSS input[type="text"]#subdomaintwo{ -webkit-appearance: none!important; color: red; text-align: right; width: 75px; border: 1px solid gray; border-left: 0px; margin: 0 0 0 -7px; background: white; } input[type="text"]#subdomain{ -webkit-appearance: none!important; border: 1px solid gray; border-right: 0px; outline: none; } JS 小提琴应使用 readonly 属性： <label for="subdomain">Subdomain:</label> <input type="text" placeholder="ExampleDomain" id="subdomain" /> <input type="text" id="subdomaintwo" value=".domain.com" readonly="readonly" /> 因为不会发布未获得焦点并在选项卡导航中被忽略的禁用控件。仅只读属性，用户无法更改。如何将 input 包装在 div 内（为了方便起见，我们将其称为 div.wrapper），然后您可以在 div.wrapper 中添加一些文本，并将“.domain.com”向右对齐？例如这样： <div class="wrapper"> <input type="text" name="subdomain"/> <p class="input-text">.domain.com</p> </div> 您可以设置 div 的样式，使其看起来像您的输入，并且可以确保实际输入没有边框等，因此它与 div.wrapper 没有区别。这有点像黑客，但为什么不呢？我不确定这是否可以仅使用一个输入表单来完成。也许您看到的不是单个输入表单，而是静态文本旁边的输入表单。所以我的想法是放置一个输入表单（用户可以在其中写入），然后放置一个静态文本（.domain.com）。然后，您可以将它们放入一个容器中，并将容器设置为看起来像输入表单的样式。这样就可以了。在 Angular 中你可以这样做：在 html 文件中添加占位符属性以使用文本变量输入： <input type="time" class="timepicker" placeholder="{{text_variable}}"> 在CSS中： .timepicker:before { content:'.' attr(placeholder); margin-right:5px; color:#9d9d9d; } 我编写了一个跨度，并为其指定了引导类 .form-control，灰色背景，并在该跨度中填充了静态单词。 <span class="form-control bg-grey">Exampledomain</span> 但我认为，nerkn 的答案解决了最好的问题。 <div style="border: 1px solid gray; display: inline; padding: 2px"> <input type="text" style="outline: 0; border: 0;"> <span>.domain.com</span> </div> https://stackblitz.com/edit/js-omhuwp?file=index.html

html css forms input

回答 8 投票 0

输入点击时打开 html5 日期选择器

默认情况下，单击图标时会打开日期选择器。现在，我希望单击输入字段时出现日期选择器。我可以通过将图标放大到 100% 宽度来实现这一点，但我不能......

html css input datepicker

回答 2 投票 0

防止 input() 为字母字符以外的任何内容

我正在尝试制作一个程序，以求自知之明。我想问用户他们的名字是什么，并且我只希望用户能够使用字母表中的字母来回答，或者只能

python string python-3.x input error-handling

回答 3 投票 0

输入“数字”是否可以始终显示向上/向下箭头？

我想始终显示输入“数字”字段的向上/向下箭头。这可能吗？到目前为止我还没有运气... http://jsfiddle.net/oneeezy/qunbnL6u/ HTML： CSS：

html css input webkit shadow-dom

回答 5 投票 0

React 中受控组件列表

我正在尝试创建一个组件列表，其中每个组件都接受用户输入并具有单独的状态。然后我希望能够过滤此列表并获取组件，例如“switch&...

reactjs list input filter controlled-component

回答 1 投票 0

如何为 CSS 中的 HTML 输入类型颜色字段的值添加透明度？

在我的 CSS 中，我需要一种基于用户选择的颜色的颜色。所选择的颜色使用固定的 80% 透明度。以下表单元素将让用户轻松选择颜色。在我的 CSS 中，我需要一种基于用户选择的颜色的颜色。选取的颜色使用固定透明度 80%。以下表单元素将让用户轻松选择颜色。 <input type=color value=#00ffff> // #00ffff 但是如何在 CSS 中为其添加透明度？ rgba(#00ffff,.8) // doesn't work 更新：我特意问了如何在CSS中做到这一点，而不是在JS中。顺便说一句，它适用于 PHP 驱动的 CMS。我不想把 JS 强加给用户，我也不喜欢用 PHP 编写转换函数。可能我必须等待 CSS4（SASS/LESS 之类）颜色函数，或者用于使用 hsla/rgba 增强输入类型颜色元素模式属性功能。基于 @Abdelaziz Mokhnache 的 answer 您还可以使用纯 JavaScript 创建自己的简单颜色输入，而无需从外部加载，如下所示： let color_picker=document.querySelector("#color_picker"); let color_wrapper=document.querySelector("#color_wrapper"); let color_picker_alpha=document.querySelector("#color_picker_alpha"); function set_color(el){ color_wrapper.style.backgroundColor=color_picker.value + (color_picker_alpha.value == 255 ? "" : parseInt(color_picker_alpha.value).toString(16).padStart(2, "0")); } #color_wrapper { background-color: black; display: inline-block; visibility: hidden; } #color_wrapper::before { content: ""; position: absolute; border-radius: 3px; outline: black solid 2px; border: white solid 3px; height: 2rem; width: 2rem; pointer-events: none; background-color: inherit; visibility: visible; box-sizing: border-box; } #color_picker { opacity: 0; height: 2rem; width: 2rem; box-sizing: border-box; pointer-events: initial; visibility: visible; } #color_picker_alpha { filter: grayscale(100%); visibility: visible; } <div id=color_wrapper> <input id="color_picker" oninput="set_color(this)" type="color" data-color="black"> <input id="color_picker_alpha" oninput="set_color(this)" type="range" min="0" max="255" step="1" value="255" /> </div> 你可以使用 jquery 来做到这一点，你可以将具有自定义透明度的自定义颜色应用于元素。 $(document).ready(function() { $("input").change(function() { var opacity = $("input[type=range]").val(); var color = $("input[type=color]").val(); var rgbaCol = 'rgba(' + parseInt(color.slice(-6, -4), 16) + ',' + parseInt(color.slice(-4, -2), 16) + ',' + parseInt(color.slice(-2), 16) + ',' + opacity + ')'; $('div').css('background-color', rgbaCol) }) }) <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <input type=color value=#00ffff>  <input type="range" min="0" max="1" step="0.1">  <div>this is a div</div> 在CSS4中有8位RGB十六进制表示法：#RRGGBBAA。最后两位数字是 Alpha 通道的值。这使得将 alpha 值连接到十六进制字符串变得容易。目前不确定浏览器支持情况。如果你想使用这种颜色但只知道HEX类型，请尝试使用颜色选择工具将其转换为RGB或HSL，网上有很多。然后只需添加 alpha 通道 (0 -1) 以实现透明度。例如。 RGB(225,10,10,0.7) 用这个： https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Colors/Color_picker_tool 这样使用， background-color : rgba(0, 255, 255, 0.8); 参考这个， http://www.wufoo.com/html5/types/6-color.html function rgbA(color) { rgba=color.substring(0,7)+$('#AlphaFill')[0].value.padStart(2,'0').replace(100,''); return rgba; } 插入输入类型=“范围”。将您的 6 位十六进制发送到上述函数。 rgbA('#ff0000') <input id="AlphaFill" class="range1" type="range" min="0" max="100" step="10" value="100" /> 以十六进制形式返回 8 位 rgba：范围 80 = #ff000080 或范围：0 = #ff000000 或范围：100 = #ff0000 最后 2 位数字改变透明度 #ffffff00 => 最小颜色不透明度 #ffffff83 #ffffffff => 最大颜色不透明度编辑：正如Lazerbeak12345所说，输入[type=color] alpha通道已被请求，但尚未取得进展。我通过添加“e6”解决了这个问题， $('#color').change(function(e){ $('.mask').css('background-color', e.target.value+'e6') console.log(e.target.value+'e6') }) 尝试使用浏览器控制台并转到元素，找到目标元素并在那里选择一种颜色，颜色中的最后 2 个字符是 alpha...只是根据我的经验我建议另一种方式：可能更方便就我而言，我输入颜色和 alpha 并将它们保存在 json 文件中，以便在加载页面时调用它读取 json 文件以获取保存的设置用于更改设置的编辑表单使用 substr() 拆分保存的颜色+alpha，然后使用 hexdec() 转换为 dec 在表单之前（php）： $value = JData['Page]; $galHighlightColor = substr($value['galHighlightColor'], 0, 7); $galBorderColor = substr($value['galBorderColor'], 0, 7); $Ha = hexdec(substr($value['galHighlightColor'], 7, 2)); $Ba = hexdec(substr($value['galBorderColor'], 7,2)); 然后以表格形式（只需为每个做）（php）： echo " <td class=\" w3-col s3\" > <input type=\"color\" name=\"galBorderColor\" value= \"".$galBorderColor."\" ></input> </td> <td class \"tooltip\"> Alpha<input type=\"range\" value = \"$Ba\" step = \"1\" class = \"coordsInput\" id = \"Ba\" name=\"Ba\" placeholder = \"alha\" size=\"3\" maxlength = \"3\" min=\"0\" max=\"255\"></input> <span class=\"tooltiptext tt-right\"> Apha 0-255 for this color </span> </td> "; 处理表单，保存每个获取颜色的完整8位颜色代码，并再次将十进制转换为十六进制，但使用dechex()现在你得到了一个颜色+alpha，你可以在我的示例中使用，我将其保存在一个json文件中（ php）： <?php $JData['Page']['galBorderColor'] = $_POST['galBorderColor'].dechex($_POST['Ba']) ; ?> Json 文件入口："galHighlightColor":"#e63333c0","galBorderColor":"#d6a8a8ff" 用于 html (php): <?php $galHighlightColor = $value['galHighlightColor']; $galborderColor = $value['galBorderColor']; echo" <div style=\"background-color:$galHighlightColor; border-color: $galborderColor;\"> </div> "; ?> “字体”颜色、背景颜色、边框颜色。试试这个 opacity: 0.5; 这将为用户选择的颜色显示透明颜色。

html css input transparency

回答 10 投票 0

HTML 和 CSS 中的简单浮动占位符，无需将背景设置为占位符

你好，我正在输入上做一个简单的浮动占位符。但我不想将占位符设置为背景，因为我有不同的输入背景和不同的背景样式。有没有wa...

html css reactjs input sass

回答 1 投票 0

React.js -- 输入字段 -- 输入字母“c”或“n”时失去焦点

所以我在 MaterialUI 的 MenuItem 内有一个输入字段，并且该 MenuItem 在 Menu 内。由于某些奇怪的原因，只有在输入字母“c”或＆q时，输入字段才会失去焦点......

reactjs input material-ui focus

回答 2 投票 0

当设置 targetFrameRate 时，为什么 Input.GetMouseButtonDown(0) 在按钮释放时返回 True？

我正在 Unity 中开发游戏，由于某种原因，Input.GetMouseButtonDown(0) 停止正常工作。当我单击鼠标时，以及当我释放鼠标按钮时，该方法都会返回 true。我们...

c# unity-game-engine input

回答 1 投票 0

Rust 在单个输入行中处理多个变量的输入

我想像这个 C++ 示例一样读取 rust 中的输入：主要的（） { 整数a，b； cin>>a>>b; //将用户输入读取到a和b中。可以用空格字符分隔或计算<<&quo...

rust input

回答 1 投票 0

如何将 Tiptap 富文本编辑器与 ShadCN UI 和 Next.js 集成？

我正在开发一个 Next.js 项目，使用 ShadCN UI 作为我的表单组件。我想用 Tiptap 富文本编辑器替换表单中描述字段的简单字段。这是当前的c...

input tiptap shadcnui nextjs14

回答 2 投票 0

如何使用 textmeshpro Unity 处理多个输入字段（用于 Pin 登录）

我面临多个 Tmpro_Input 字段的问题。我正在使用 pin 进行登录，其中有 4 个不同的输入字段，每个输入字段将包含 int 中的 1 个输入，并且输入是 usi...

android ios unity-game-engine input textmeshpro

回答 1 投票 0

input 相关问题

最新问题