Question

我的textarea有静态内容。因此我禁用了textarea以防止对内容进行任何修改。但我想修改这些内容的某些部分。我怎么能这样做？

我创建了一个选择框，如下所示：

<div class="scroll-inside">
    <?php if($transactionalTemplates->num_rows() > 0) { 
        foreach($transactionalTemplates->result_array() as $template) { ?>
            <a href="#" class="transactionalTemplate" data-text="<?php echo $template['TemplateText']?>">
                <?php echo $template['TemplateText'];?>
            </a>

    <?php   }
       }
   ?>
</div>

当我选择一个项目时，所选项目将粘贴到以下textarea

<textarea placeholder="Enter your message here.." maxlength="160" class="messageTransactional" name="messageTransactional" id="messageTransactionalEnglish"></textarea>

这是我的脚本代码：

$('.transactionalTemplate').click(function() { 
        $('.messageTransactional').val($(this).data('text'));
        flag = true;
        $('.messageTransactional').keypress(function(e) {
            e.preventDefault();
        });
    });

将内容添加到textarea后，我阻止使用上述功能键入新内容。这是一个例子：

假设Dear (123), thanks for registering with us. Please subscribe our new offer to send unlimited SMS. For details please call (123)是我的内容。

我需要将此内容编辑为Dear John, thanks for registering with us. Please subscribe our new offer to send unlimited SMS. For details please call 91xxxxxxxx

这意味着，我需要更改paranthesis中的内容，保持格式静态。

Answer 1

我强烈建议不要使用textarea。没有真正的方法可以阻止它。您需要自己动手并尝试抓住每一种可能性来改变它。

相反，简单的文本输入通常看起来最好。

或者，如果它必须是无缝的，您可以使用contenteditable范围，如下所示：

＆＃13;

Dear <span contenteditable="true">(please enter your name here)</span>, thanks for registering with us. Please subscribe our new offer to send unlimited SMS. For details please call <span contenteditable="true">(please enter your tel. number here)</span>

＆＃13;

Answer 2

我很无聊所以做了一个非常酷的解决方案，但它并不完美，但仍然需要投入生产。

const $editable = $('.editable')
const $inputs = $('.input')
const $save = $('#save')

const popup = function(e) {
  const $this = $(this)
  $this
    .find('input')
    .addClass('active')
    .focus()
}

const onBlur = function(e) {
  const $this = $(this)
  const $parent = $this.parent()
  const value = $this.val()
  
  $parent.find('input')
    .removeClass('active')
  
  if (value) {
    $parent
      .find('.value')
      .text($this.val())
  }
}

const onSave = function(e) {
  const $pre = $('pre')
  console.log('save', $pre.text())
}

$editable.on('click', popup)
$inputs.on('blur', onBlur)
$save.on('click', onSave)

body {
  padding: 1em;
}

pre {
  white-space: normal;
  font-family: sans-serif;
}

.editable {
  border-bottom: 1px dotted #3cf;
  color: #3cf;
  min-width: 1em;
  min-height: 1em;
  position: relative;
}

.editable input {
  position: absolute;
  width: 80px;
  transform: translate(-70px, 0%);
  border: 1px solid #aaa;
  padding: .5em;
  border-radius: 5px;
  text-align: center;
  opacity: 0;
  visibility: hidden;
  transition: .4s opacity ease, .4s transform;
}

.editable input:focus,
.editable input.active {
  transform: translate(-70px, -100%);
  opacity: 1;
  visibility: visible;
  outline: none;
}

.editable:focus {
  outline: none;
}

.button {
  float: right;
  padding: .5em 2em;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="hidden" name="messageTransactional" />

<pre id=="messageTransactional">
Dear <span class="editable" id="name"><span class="value">name</span><input type="text" class="input" /></span>, thanks for registering with us. Please subscribe our new offer to send unlimited SMS. For details please call <span class="editable" id="phone"><span class="value">phone</span><input type="text" class="input" /></span> is my content.
</pre>

<button id="save" class="button">save</button>

禁用部分textarea内容

2 个答案: