Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   Вставка в разные textarea (https://javascript.ru/forum/misc/44779-vstavka-v-raznye-textarea.html)

Gertasreg 01.02.2014 22:54

Вставка в разные textarea
 
Всем доброго времени суток
Вот не как не могу сообразить, есть textearea, есть функция вставки bb кода в текстовое поле все работает все нормально )
А если например работать с двумя textarea то как узнать какую из них юзает пользователь чтобы именно в нее вставлять bb код?
Мне бы просто понять саму суть "логику" работы

BETEPAH 01.02.2014 23:22

Gertasreg,
понять бы Вашу логику :)
Вы ходите сделать одну панель кнопок bb-кодов для двух текстарей? Не стоит. Сделайте для каждой свою, чтоб не запутывать пользователя.

Gertasreg 01.02.2014 23:36

Ах точно я не совсем уточнил )
для каждой textarea свой блок ббкодов, вставляю после js
if ($(".textarea").length) {
	$(".textarea").before(
		'<ul class="redactor_toolbar">' + 
			'<li><a href="javascript:;" data-id="b" class="redactor_bold"></a></li>' +
			'<li><a href="javascript:;" class="redactor_underlined"></a></li>' + 
			'<li><a href="javascript:;" class="redactor_italic"></a></li>' + 
			'<li><a href="javascript:;" class="redactor_image"></a></li>' + 
			'<li><a href="javascript:;" class="redactor_link"></a></li>' + 
			'<li><a href="javascript:;" class="redactor_video"></a></li>' + 
		'</ul>'
	);
}

Проблема в том что я не могу понять в какую textarea вставлят ббкод если их 2 или больше

Gertasreg 02.02.2014 01:32

помогите а

Vlasenko Fedor 02.02.2014 02:25

<style>
      div.testblock {
        width:200px;
        margin: 10px;
        float: left;
      }
      div.testblock>textarea {
        width:200px;
        height: 80px;
        clear:booth;
      }
    </style>
    <div class="testblock">
      <textarea></textarea>
      <input type="button" value="Insert text" />
    </div>
    <div class="testblock">
      <textarea></textarea>
      <input type="button" value="Insert text" />
    </div>
    <div class="testblock">
      <textarea></textarea>
      <input type="button" value="Insert text" />
    </div>
    <script>
      window.onload = function () {
        var inps = document.querySelectorAll("div.testblock>input"),
          len = inps.length;
        for (; inps[--len].setAttribute("onclick", "ins(this)"), len;);
        ins = function (el) {
          var par = el.parentNode || el.parentElement,
            tar = par.children[0];
          tar.innerHTML += "Yes ";
        }
      }
    </script>

должно подтолкнуть на нахождение решения :victory:

kostyanet 02.02.2014 12:05

Цитата:

Сообщение от Gertasreg
Проблема в том что я не могу понять в какую textarea вставлят ббкод если их 2 или больше

В активный элемент и вставляйте. Вы догадались дать ему tabindex?

Deff 02.02.2014 12:07

Gertasreg,
Отслеживать фокус на поле

<textarea id=1 onfocus="tst(this)"></textarea>
<textarea id=2  onfocus="tst(this)"></textarea>
<script>
function tst(area) {
alert(area.id)
}
</script>

Gertasreg 02.02.2014 13:26

kostyanet,
Deff,
tabindex я запретил переходы
onfocus, а что если пользователь сразу нажмет на ббкод

Deff 02.02.2014 14:49

Цитата:

Сообщение от Gertasreg
что если пользователь сразу нажмет на ббкод

Вы же сказали что к каждой форме приписан свой BB-код ?
Отслеживайте клик на обрамлении кнопок соответствуюшей линейке bb-кодов, определяя кликнутый селектор линейки или фокус техтареа - определяете приписку вставок

<script src="http://code.jquery.com/jquery-latest.js"></script>

<span class="wrp-area" style="сursor:pointer;float:left;text-align:center">Кнопки 1<br/><br/><textarea id=1></textarea></span><span class="wrp-area" style="сursor:pointer;float:left;text-align:center">Кнопки 2<br/><br/><textarea id=2></textarea></span>
<script>
$('.wrp-area,.wrp-area textarea').bind('focus click',function () {
  var id = $(this).find('textarea')[0].id;
  alert(id);
});
</script>

Vlasenko Fedor 02.02.2014 15:07

Попытка №2 :haha:
<style>
      div.testblock {
        width:200px;
        margin: 10px;
        float: left;
      }
      div.testblock>textarea {
        width:200px;
        height: 80px;
        clear:booth;
      }
    </style>
    <div class="testblock">
      <textarea></textarea>
      <div id="panel">
        <input type="button" value="A" />
        <input type="button" value="B" />
        <input type="button" value="C" />
        <input type="button" value="D" />
        <input type="button" value="E" />
      </div>
    </div>
    <div class="testblock">
      <textarea></textarea>
    </div>
    <div class="testblock">
      <textarea></textarea>
    </div>
    <script>
      window.onload = function () {
        var inps = document.querySelectorAll("div.testblock"),
          len = inps.length;
        for (; inps[--len].setAttribute("onclick", "edit(this)"), len;);
      }
      edit = function (el) {
        el.appendChild(panel);
      }
      panel.onclick = function (e) {
        e = e || window.event;
        var el = e.target || e.srcElement;
        if (el.tagName != "INPUT") return;
        var par = this.parentNode || this.parentElement,
          tar = par.children[0];
        var myValue = el.value,
          myValueLen = myValue.length;
        if (document.selection) {
          tar.focus();
          var sel = document.selection.createRange();
          sel.text = myValue;
          tar.focus();
        } else if (tar.selectionStart || tar.selectionStart == '0') {
          var startPos = tar.selectionStart,
            endPos = tar.selectionEnd,
            scrollTop = tar.scrollTop;
          tar.value = tar.value.substring(0, startPos) + myValue + tar.value.substring(endPos, tar.value.length);
          tar.focus();
          tar.selectionStart = startPos + myValueLen;
          tar.selectionEnd = startPos + myValueLen;
          tar.scrollTop = scrollTop;
        } else {
          tar.value += myValue;
          tar.focus();
        }
      }
    </script>


Часовой пояс GMT +3, время: 14:34.