我正在构建一个对代码进行语法突出显示的编辑器。我当前的方法是仅获取编辑器中的文本(contenteditable 设置为 true 的 div)并检查字符串中的正则表达式匹配。然后,我用元素替换匹配项<span>,并对这些 span 元素应用一些样式。然后,我使用该属性将分隔线中的完整文本替换为新文本.innerHTML。这工作得很好,但我必须向后输入,因为插入文本后,我的光标被重置到位置零。我尝试记录插入之前的值selectionStart,然后执行
element.selectionStart = oldSelectionStart + 1;
Run Code Online (Sandbox Code Playgroud)
但没有成功。我认为这是因为 chrome 的渲染管道,其中 JavaScript 在渲染页面之前运行,并且光标在渲染时重置,而不是在设置时重置...任何人都可以帮忙吗?如何设法将光标保持在原来的位置?
我一直在尝试实现一个可以进入普通 Google 搜索结果或第一个搜索结果的表单。这是我尝试过的。
<form action="https://google.com/search">
<input type="text" name="q" class="box">
<br>
<div>
<input type="submit" value="Google Search" class="button">
<input type="submit" value="I'm Feeling Lucky" class="button" formaction="https://google.com/search?&btnI=1">
</div>
</form>
Run Code Online (Sandbox Code Playgroud)
我知道一个事实,如果我搜索让我们说“AMD”,那么我感到幸运的 URL 应该是 "https://google.com/search?q=AMD&btnI=1"
但是,我无法"&btn1"在 URL 的末尾添加它。
我正在使用nx.dev来构建和测试一个 Web 应用程序。该workspace.json包含脚本来构建和测试应用程序,然而构建阶段还是需要一些文件的预处理。
有没有办法添加预构建步骤(即指定外部 bash 脚本或 JavaScript 代码)?
在线文档没有提到 https://nx.dev/react/cli/build
我正在尝试将旋转标题放置在某些文本旁边。静态地,它可以通过绝对定位轻松工作(左图)。然而,当页面调整大小并且定位失败时,我遇到了困难(右图)。
\n
\n
当前 CSS(可以更改):
\n.headline {\n white-space: nowrap;\n position: absolute;\n top: 185px;\n left: -20px;\n transform: rotate(270deg);\n}\nRun Code Online (Sandbox Code Playgroud)\n当前 HTML 结构(可以更改):
\n<header>\n <h1 class="headline">\xc3\x9cber mich</h1>\n</header>\n<div class="text">\n <p class="introduction">....</p>\n</div>\nRun Code Online (Sandbox Code Playgroud)\n我怎样才能定位元素,以便我始终保持20px在段落旁边?\n有人可以将我链接到现有模式如何解决这个问题吗?
使用 JS(和 jQuery)的解决方案是一个选择,但我显然更喜欢 CSS。
\n我在下面有一个简单的数组,我只是通过处理程序更改数组中元素的索引:
const [items, setItems] = useState([
{ id: 5, val: "Iran" },
{ id: 2, val: "Germany" },
{ id: 3, val: "Brazil" },
{ id: 4, val: "Poland" }
]);
Run Code Online (Sandbox Code Playgroud)
我的处理程序:
const handlePosition = (old_index, new_index) => {
if (new_index >= items.length) {
var k = new_index - items.length + 1;
while (k--) {
items.push(undefined);
}
}
items.splice(new_index, 0, items.splice(old_index, 1)[0]);
setItems(items);
console.log(items);
};
Run Code Online (Sandbox Code Playgroud)
我尝试items按如下方式呈现数组:
<ul>
{items.map((item, index) => (
<li key={item.id}>
{item.val}
<button onClick={() => handlePosition(index, …Run Code Online (Sandbox Code Playgroud) 我正在为我的摄影爱好开发一个新网站。广告是 faspix.com 我已经让它适合我想要的笔记本电脑/台式机,但是当我在 iPhone 上加载页面时,我遇到了让宽度适合我的 iPhone 的问题,高度在那里,但只有宽度从左到右显示大约一半然后我必须向右滚动才能看到其余的宽度......我尝试了一堆不同的媒体查询,但没有真正解决这个问题,例如当我将 site_content 切换到最大宽度 100 时它只是缩小了 iPhone 上的容器。有人可以帮我解决 iPhone 上的这个宽度问题吗?谢谢
CSS:
media (max-device-width: 1024px) { /*IPad portrait AND netbooks, AND anything with smaller screen*/ /*make the design flexible if possible */ /*Structure your code thinking about all devices that go below*/ }
@media (max-device-width: 640px) { /*Iphone portrait and smaller*/ }
media (max-device-width: 540px) { /*Smaller and smaller...*/ }
media (max-device-width: 320px) { /*IPhone portrait and smaller. You can probably stop on 320px*/ }
Run Code Online (Sandbox Code Playgroud) 如果我已经设定:
<input class="slider" type="range" min="0" max="100">
<input class="slider" type="range" min="0" max="255">
Run Code Online (Sandbox Code Playgroud)
如何使用jQuery/Javascript获取最小值和最大值?
我想稍后做这样的事情,我可以获得最大值并将其解析为变量maxValue
if (maxValue == 100) {console.log("100");}
else if (maxValue == 255) {console.log("255");}
Run Code Online (Sandbox Code Playgroud) 我有一个弹出窗口,它动态加载内容并用于overflow: auto维护弹出窗口大小,进而使其可滚动。我在底部有一个链接,当前使用锚点滚动到 div 的顶部。不幸的是,它还强制页面向下滚动到该点并滚动到该 div 的顶部。
我试图阻止页面滚动,只滚动到 div 的顶部。我尝试过多种滚动到顶部的场景:
$('#id').scrollTop(0);
Run Code Online (Sandbox Code Playgroud)
也
$('#id').animate({
scrollTop: 0
}, 'slow');
Run Code Online (Sandbox Code Playgroud)
不幸的是,这什么也没做。我没有收到任何错误。我尝试在控制台中尝试它,但没有附加到任何单击事件,它什么也不做,只是将 id 打印到我瞄准的控制台。
这是此页面实际生产版本的链接。如果您单击隐私政策、条款或了解更多信息的链接,然后单击任何返回顶部的链接,您将看到问题所在。
我有一个非常简单的计算器,可以通过React计算两个输入,并且我result在更新状态时遇到问题(result通过名为 的函数更新状态calc)。这是通过下一个动作完成的,而不是在当下完成的!
总之,现在结果状态计算出错误的值。
我的代码:
const App = () => {
const [state, setState] = useState({
firstVal: 0,
secondVal: 0,
operator: "+",
result: 0
});
const { firstVal, secondVal, operator, result } = state;
const calc = (firstVal, secondVal, operator) => {
if (operator === "+") {
return firstVal + secondVal;
} else if (operator === "-") {
return firstVal - secondVal;
} else if (operator === "*") {
return firstVal * …Run Code Online (Sandbox Code Playgroud) 所以我很难对齐布尔玛专栏底部的按钮。
我希望按钮“购买”位于右栏的底部(与按钮“你好”并排)。我处于这种情况是因为我的其他专栏内容更长。
到目前为止,我在按钮上尝试了这些 CSS 样式(但没有一个对我有帮助):
vertical-align: bottom;
Run Code Online (Sandbox Code Playgroud)
margin-bottom: auto;
Run Code Online (Sandbox Code Playgroud)
position: absolute;
bottom: 0;
Run Code Online (Sandbox Code Playgroud)
这是我的 HTML:
<section class="section">
<div class="columns is-centered">
<div class="column is-one-fifth">
<h4 class="title is-4">I'm a big column</h4>
I'm taller than the column next to me so my column will be bigger, lorem ipsum lorem ipsum lorem ipsum lorem ipsum
<h6 class="sub">"lorem ipsum"</h6>
<button class="button is-fullwidth">Hello</button>
</div>
<div class="column is-one-fifth">
<h4 class="title is-4">I'm a small column</h4>
I'm a small column, and my button missplaced
<h6 class="sub">"lorem ipsum"</h6>
<button class="button …Run Code Online (Sandbox Code Playgroud) 我正在尝试发布一个带有类似于表格条目的字段的表单
我想我最好举个例子:
<form method="post">
<table>
<tr>
<td><label>Name:</label></td>
<td><input type="text" name="appsDetails[name]" placeholder="Enter name" value=""/></td>
<td><label>ID:</label></td>
<td><input type="text" name="appsDetails[id]" placeholder="Enter id" value=""/></td>
<td><label>Token:</label></td>
<td><input type="text" name="appsDetails[token]" placeholder="Enter token" value=""/></td>
</tr>
<tr>
<td><label>Name:</label></td>
<td><input type="text" name="appsDetails[name]" placeholder="Enter name" value=""/></td>
<td><label>ID:</label></td>
<td><input type="text" name="appsDetails[id]" placeholder="Enter id" value=""/></td>
<td><label>Token:</label></td>
<td><input type="text" name="appsDetails[token]" placeholder="Enter token" value=""/></td>
</tr>
<tr>
<td><label>Name:</label></td>
<td><input type="text" name="appsDetails[name]" placeholder="Enter name" value=""/></td>
<td><label>ID:</label></td>
<td><input type="text" name="appsDetails[id]" placeholder="Enter id" value=""/></td>
<td><label>Token:</label></td>
<td><input type="text" name="appsDetails[token]" placeholder="Enter token" value=""/></td>
</tr>
</table>
</form>
Run Code Online (Sandbox Code Playgroud)
您还可以检查:小提琴示例
当上面的示例提交时,我只得到表中的最后一行。
我的问题:有没有办法像数组中的数组一样做到这一点?如果这是有道理的 …