发表新帖
发表新帖

Is there a way to make a text area partially editable? (make only portions of the text editable)

前端 未结
关注
8 1570
太阳男子
太阳男子 2020-11-29 08:09

I just came across a situation in which it would be an elegant solution to have only portions of a text area (previously loaded with text) be editable while other portions a

相关标签:
8条回答
  • 夕颜
    2020-11-29 08:49

    In a parent element, you can set the border to 1px solid gray and then inside this, put the

    1) textarea (modify the css to not have border) 2) label (no border as well)

    In this case, it will look like the both texts inside 1) and 2) are together since they are placed in one box. 1) Is editable though while the other is grayed out.

    0 讨论(0)
  • 长情又很酷
    2020-11-29 08:49

    I would suggest two textareas one readonly and another editable one, overlapping so it looks like its only one

    0 讨论(0)
  • 野性不改
    2020-11-29 08:52

    Well, you could do something like this. This code is very inefficient, I'm just trying to outline the concept.

    JS:

    $(function () {
            var tb = $("#t").get(0);
            $("#t").keydown(function (event) {
                var start = tb.selectionStart;
                var end = tb.selectionEnd;
                var reg = new RegExp("(@{.+?})", "g");
                var amatch = null;
                while ((amatch = reg.exec(tb.value)) != null) {
                    var thisMatchStart = amatch.index;
                    var thisMatchEnd = amatch.index + amatch[0].length;
                    if (start <= thisMatchStart && end > thisMatchStart) {
                        event.preventDefault();
                        return false;
                    }
                    else if (start > thisMatchStart && start < thisMatchEnd) {
                        event.preventDefault();
                        return false;
                    }
                }
            });
        });

    HTML

    <textarea id="t" rows=5 cols="80">Hello this is a test @{stuff} 

        this part is editable @{other stuff}     

    </textarea>

    This uses your idea of "markers." The general idea is to say ok, is the text range that the user is trying to edit inside of one of our markers? Obviously, using a regexp everytime a key is pressed is not the best way to determine this, I'm not ignoring arrows keys, etc. etc. but this gives you a general idea.

    0 讨论(0)
  • 暖寄归人
    2020-11-29 08:59

    I'd suggest, rather than trying to break the contents of an input into sub-strings of editable/non-editable content, you use the contentEditable attribute of an HTML element, and use JavaScript to pass that edited value into a hidden input elsewhere in the page.

    0 讨论(0)
  • 迷失自我
    2020-11-29 09:01

    After searching find it's really hard to make a text area partially editable

    Here is my code that i used for this requirement 

    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>

    0 讨论(0)
  • 悲哀的现实
    2020-11-29 09:06

    If you're using a plain textarea element, you won't be able to style up the required content (based on whether or not that content is editable). At best you'd be able to check to see whether the content your user is trying to change is on either the blacklist or whitelist and then stop the edit or not accordingly. You might also provide some visual feedback like a warning message saying "you can't do that".

    My recommendation would be to take advantage of the contenteditable attribute, which might take a bit more time to style but will allow you much greater flexibility in the long run.

    You would be able to style up a div element to look much like your required textarea, then use editable spans within that to set whether or not a particular block of text can be edited. You could then use JavaScript commands (refer to the link above) or use a "save" button to retrieve this content, set it as the value for your actual textarea (which you could have hidden) and post your page back as normal.

    Use the following code as a rough example.

    <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>
    0 讨论(0)
 看不清?
提交回复
热议问题