Ken*_*ina 20 javascript jquery textarea
我刚刚遇到一种情况,它只是一个优雅的解决方案,只有部分文本区域(以前加载文本)可编辑而其他部分不是("灰色",可以这么说).
通常使用javascript可以实现这一点吗？
我会使用jQuery.
如果您使用的是纯文本区域元素,则无法设置所需内容的样式(基于该内容是否可编辑).您最多可以检查用户尝试更改的内容是在黑名单还是白名单上,然后相应地停止编辑.您可能还会提供一些视觉反馈,例如警告信息"您不能这样做".
我的建议是利用contenteditable属性,这可能需要更多的时间来设置样式,但从长远来看,它将为您提供更大的灵活性.
您可以将div元素设置为与所需的textarea类似,然后使用其中的可编辑跨度来设置是否可以编辑特定的文本块.然后,您可以使用JavaScript命令(请参阅上面的链接)或使用"保存"按钮检索此内容,将其设置为实际文本区域(您可能已隐藏)的值,并正常发回您的页面.
使用以下代码作为粗略示例.
<div id="editable-content">
<span id="block1" class="editable" contenteditable="true">This is some editable content which will </span>
<span id="block2" class="non-editable">quickly be followed by some non-editable content</span>
</div>
<div style="display: none;">
<textarea id="PostedContent"></textarea>
</div>
<div>
<input id="save-page" type="submit" value="Save Page" />
</div>
<script type="text/javascript">
$(function () {
$('#save-page').click(function () {
$('#PostedContent').val($('#editable-content').text());
});
});
</script>
你可以这样做(只是一个概述的想法,没有代码):
设计与整个文本匹配的正则表达式.对不可修改的部件使用固定字符串,并[\s\S]*?用于可修改的部件.使用^和$锚定你的正则表达式.
/^This is fixed text\. Now something editable:[\s\S]*?Now fixed again\.$/
现在对keyup事件作出反应,也可能对其他事件做出反应(如paste).
对于每个相关事件,请检查正则表达式是否仍然匹配.
如果没有,请取消该活动.
实际上,这应该停止对正则表达式中文字部分的修改,从而使文本的某些部分成为只读.
不要忘记在表单发布后测试服务器端的字符串 - 永远不要相信客户端无法发送无效值.
编辑
您可以使用正则表达式引用函数从字符串动态构建该正则表达式,这可以为您节省很多麻烦.
function regexQuote(s) { return s.replace(/[\[\]^$*+?{}.|\\]/g, "\\$&") }
用法
var re = new Regex(
"^" +
[regexQuote(fixedPart1), regexQuote(fixedPart2)].join("[\\s\\S].*?")
+ "$"
);
搜索后发现很难使文本区域部分可编辑
这是我用于满足此要求的代码
input
{
width:100%;
border:0px solid;
outline:none
}
<!DOCTYPE html>
<html>
<div style="padding: 2px;border:1px solid #ccc;width: 82%;max-height:100px;min-height: 51px;overflow:auto;outline: none;resize: both;" contenteditable="true" unselectable="on">
<input placeholder="enter prefix..." value="editable postfix..." ></input>
<div id='unEditable' style="background-color:yellow;width: fit-content;padding-left:10px;padding-right:10px;border-radius:10px;height: fit-content;" contenteditable="false" unselectable="off" onkeyup="" >
fixed content non-editable
</div>
<input placeholder="enter postfix..." value="editable prefix..." style='width:97%'></input>
</div>
</html>| 归档时间： |
|
| 查看次数： |
17425 次 |
| 最近记录： |