Можем ли мы включить флажок внутри текстовой области в html?

Question

Можем ли мы получить флажок внутри текстовой области в html ??

Я пытался разработать пользовательский интерфейс, я поделюсь кодом

<textarea title="JSON Input" id="json_data"  ></textarea>

В этом Мне нужно добавить флажок, чтобы количество строк json, которое я дам, приходило с соответствующими флажками в каждой строке.

Предположим, в моей текстовой области я ввожу json из 5 строк, я должен получить эти 5 строк в текстовой области с флажками в конце строки.

<input type="checkbox" onclick="if(this.checked){myFunction()}">

Я использую вышеуказанный скрипт для получения флажка, но я не получаю требуемый вывод. Можем ли мы использовать любое регулярное выражение для этого ??

Answer 1

Невозможно или красиво поместить теги в текстовое поле. Я не знаю ваших предложений, но я создал два примера в одном фрагменте, которые могут помочь вам

.request-input {
  margin: 15px;
  padding: 15px;
  color: #000;
  background-color: #fff;
  border: 1px solid #000;
}

.request-input .form-group {
  margin-bottom: 0;
  padding-left: 25px;
}

.request-input .form-group input {
  padding: 0;
  border: none;
}

.request-input .form-group .field-name::before,
.request-input .form-group .field-value::before,
.request-input .form-group .field-name::after,
.request-input .form-group .field-value::after {
  content: "\"";
}

<form class="request-input">
  <div class="row">
    <div class="brace">{</div>
  </div>
  <!-- here are two inputs for the names and values -->
  <div class="row">
    <div class="form-group">
      <span class="field-name">
        <input type="text" name="field-name[]" class="field-input" value="name" />
      </span>
      <span class="colon">:</span>
      <span class="field-value">
        <input type="text" name="field-value[]" class="field-input" value="Ashish" />
      </span>
      <span class="comma">,</span>
      <span class="field-active">
        <input type="checkbox" name="field-active[]" class="field-input" checked="checked" />
      </span>
    </div>
  </div>
  <div class="row">
    <div class="form-group">
      <span class="field-name">
        <input type="text" name="field-name[]" class="field-input" value="id" />
      </span>
      <span class="colon">:</span>
      <span class="field-value">
        <input type="number" name="field-value[]" class="field-input" value="007" />
      </span>
      <span class="field-active">
        <input type="checkbox" name="field-active[]" class="field-input" checked="checked" />
      </span>
    </div>
  </div>
  <br />
  <!-- here is only one input for the names and values -->
  <div class="row">
    <div class="form-group">
      <span class="field">
        <input type="text" name="field[]" class="field-input" value="&quot;name&quot;:&quot;Ashash&quot;," />
      </span>
      <span class="field-active">
        <input type="checkbox" name="field-active[]" class="field-input" checked="checked" />
      </span>
    </div>
  </div>
  <div class="row">
    <div class="form-group">
      <span class="field">
        <input type="text" name="field[]" class="field-input" value="&quot;id&quot;:&quot;007&quot;" />
      </span>
      <span class="field-active">
        <input type="checkbox" name="field-active[]" class="field-input" checked="checked" />
      </span>
    </div>
  </div>
  <div class="row">
    <div class="brace">}</div>
  </div>
</form>