Смена текста

На shpargalkablog.ru уже был показан скрипт меняющегося текста на jQuery. Теперь рассмотрим варианты, где смена происходит по щелчку мышки.

Самый простой вариант

<input type="button" value="Щелчок" onclick="this.value='Скрипт сработал'">

После щелчка кнопка перестаёт быть активной

<input type="button" value="Щелчок" onclick="this.disabled=1;  this.value='Скрипт сработал'; ">

Поменять ссылку

<script type="text/javascript">
function changeLink()
{
document.getElementById('myAnchor').innerHTML="Скрипт Упорядочить таблицу";
document.getElementById('myAnchor').href="http://shpargalkablog.ru/2011/07/uporyadochet-tablitsu-po-alfavitu.html";
document.getElementById('myAnchor').target="_blank";
}
</script>

<a id="myAnchor" href="http://shpargalkablog.ru/2010/11/poyavlyayushchiesya-commentarii.html">Скрипт "Показать скрыть текст"</a>
<input type="button" onclick="changeLink()" value="Change link">
Скрипт "Показать скрыть текст"

Заменить кнопку на ссылку

<script type="text/javascript">
function changeText(){
 document.getElementById('boldStuff').innerHTML = 'Текст изменился';
}
</script>

<a id='boldStuff' href="#" onclick="changeText();return false;">Нажать</a>
Нажать

Смена на текст, заполненный в окне

<script type="text/javascript">
function changeText2(){
 var userInput = document.getElementById('userInput').value;
 document.getElementById('boldStuff2').innerHTML = userInput;
}
</script>
<p>
Поменяем текст на введённый в форму ниже <b id='boldStuff2'>а именно на</b> </p>
<input type='text' id='userInput' value=' Введите вашу фразу ' /><input type='button' onclick='changeText2()' value='Change Text'/>

Поменяем текст на введённый в форму ниже а именно на

Выбор из меню

<script language="javascript">
      var selected_state;

      function ckswapText(obj)
      {
         selected_state = obj.value;
         
         if(selected_state == "")
           return;

         if(selected_state =="AZ")
           changeText();
         else if( selected_state =="CA")
           swapText3();
         else if( selected_state == "CO")
           swapText4();
         else
           olswapText();
      }

      function changeText(){
         document.getElementById('boldStuff').innerHTML = 'порода собак';
      }

      function swapText3(){
         document.getElementById('boldStuff').innerHTML = 'порода кошек';
      }

      function swapText4(){
         document.getElementById('boldStuff').innerHTML = 'порода кроликов';
      }
      function olswapText(){
         document.getElementById('boldStuff').innerHTML = 'порода лошадей';
      }
      </script> 

<select class="apply_text" size="1" name="billto_state" id="billto_state" onchange="ckswapText(this);">
<option value="" selected>Алабай</option>
<option value="AL">Буденновская порода</option>
<option value="AK">Алтайская порода</option>
<option value="AZ">Австралийская овчарка</option>
<option value="AR">Австралийский Пони</option>
<option value="CA">Турецкая ангора</option>
<option value="CO">Огневка</option>
<option value="WY">Бурятская порода</option>
</select>
<p>
Это <b id='boldStuff'>порода собак</b> </p>

Поменять два раза туда и обратно

<script type='text/JavaScript'>
     function verocultar(cual) {
          var c=cual.nextSibling;
          if(c.innerHTML=='сказ два') {
               c.innerHTML='сказ раз';
          } else {
               c.innerHTML='сказ два';
          }
          return false;
     }
</script><a onclick="return verocultar(this);"
     href="javascript:void(0);">замена</a><div>
....... содержание .......
</div>
замена....... содержание .......

Добавить текст в textarea

<textarea id="text">строка</textarea>
<script language="javascript" type="text/javascript">
var text=document.getElementById("text");
text.value="<b>"+text.value+"</b>";
</script>


Добавить текст в textarea по щелчку

<script type="text/javascript">
function changeLink()
{
var text=document.getElementById("myAnchor");
document.getElementById('myAnchor').value="<b>"+text.value+"</b>";
}
</script>

<input type="text" id="myAnchor" value="значение"/>
<input type="button" onclick="changeLink()" value="Change link">


Выделение части текста в textarea


<textarea id="textarea">Какой-то текст. Если его часть выделить и нажать на кнопку, то этот текст будет окружён тегами b</textarea>
<br />
<button type="button" id="button">кнопка</button>

<script>
var textarea = document.getElementById("textarea");
var button = document.getElementById("button");
button.onclick = function() {
var len = textarea.value.length,
    start = textarea.selectionStart,
    end = textarea.selectionEnd,
    sel = textarea.value.substring(start, end),
    replace = '<b>' + sel + '<b>';
textarea.value = textarea.value.substring(0,start) + replace + textarea.value.substring(end,len);
}
</script>
Дополнительные ссылки: developer.mozilla.org с примером, corpocrat.com с вариантом для старых IE

Заменить символ с помощью скрипта

<script type="text/javascript">
function decode() {
 var obj = document.getElementById('dencoder');
 var encoded = obj.value;
 obj.value = decodeURIComponent(encoded.replace(/\</g,  "&#12296;"));
 var encoded1 = obj.value;
 obj.value = decodeURIComponent(encoded1.replace(/\>/g,  "&#12297;"));
}
</script><form onsubmit="return false;">
<textarea id="dencoder" rows="1" cols="50"><b>строка1</b></textarea><input type="button" value="Decode" onclick="decode()"/>
</form>
или
<script>
document.documentElement.innerHTML = document.documentElement.innerHTML.replace(/858/g,  &quot;505&quot;);
</script>

Зачем всё это

В "Приложении 5" была реализована функция смены фона. При этом кнопка чередует свой цвет и текст. Конечную реализацию можете посмотреть в комментариях к статье http://shpargalkablog.ru/2011/08/fon-dlya-saita-html.html.
в f t
наверх ↑

17 комментариев:

Sergio
В первый раз за долгое время читаю пост о скриптах, спасибо =)
NMitra
Решила записать, вдруг кому-то пригодиться )
Александр Александрович
Здравствуйте! Как можно выровнять по центру кнопки соц. сетей, которые под статьей и можно ли сделать так, чтобы они были только в статьях, а не в рубриках/главной.
Сайт: http://blog-fiz.blogspot.com/

Заранее спасибо!
NMitra
Нужно добавить CSS http://shpargalkablog.ru/2011/12/kak-izmenit-shablon-blogger.html#css

.st-post-footer-buttons { text-align: center; }

По второму вопросу: окружите код условием см. http://shpargalkablog.ru/2011/02/uslovnye-tegi-v-blogger.html

Александр Александрович
Так дело в том что это скрипт. Может в сам скрипт вставить этот код?
NMitra
Окружите скрипт div, который от центрируйте.
Анонимный
"Заменить кнопку на ссылку"

Подскажите, а как при повторном нажатии снова выводить первоначальный текст?
NMitra
<script>
function changeText(){
 document.getElementById('boldStuff').innerHTML = (document.getElementById('boldStuff').innerHTML == 'Нажать') ? 'Текст изменился' : 'Нажать';
}
</script>

<span id='boldStuff' onclick="changeText();">Нажать</span>
Сергей Казаков
а как вставить те же В (жирный текст) не ко всему тексту в поле, а к выделенному мышкой куску?
NMitra
Дополнила статью примером. Плюс ссылками, обратите на них внимание.
Анонимный
Очень много интересных и нужных решений. Отличная, полезная статья. Есть вопрос:
Как заменить часть номера телефона вот так 8919-ххх-хх-хх, а при нажатии на кнопку выводился полность 8912-355-46-82. Номер выводится через переменную. Или можно чтобы при нажатии на кнопку вместо надписи появлялся номер. Тоесть надпись пропадает, номер появляется. Заранее примного благодарен.
NMitra
<output>8919-ххх-хх-хх</output><input type="button" onclick="this.previousSibling.innerHTML=this.previousSibling.innerHTML.replace(/8919-ххх-хх-хх/gi, '8912-355-46-82')" value="Показать номер">
Анонимный
Спасибо большое за ответ. Вы мне очень помогли. :-)
Nikita estragon
NMitra я тебя боготворю, весь инет излазил, только здесь нашёл "Выделение части текста в textarea"
NMitra
Спасибо, сама не знаю как это тут оказалось :)
Анонимный
Приветствую.
Как в скрипте "Смена на текст, заполненный в окне" сделать, чтобы менялись все совпадения в тексте, а не только первое.
NMitra
Добрый день. Вместо "текст" - ваше слово (подробнее про регулярные выражения http://shpargalkablog.ru/2013/07/replace.html )

<script>
function changeText2(){
var userInput = document.getElementById('userInput').value;
document.getElementById('boldStuff2').innerHTML = document.getElementById('boldStuff2').innerHTML.replace(/текст/g, userInput);
}
</script>

Можно id='boldStuff2' заменить на class='boldStuff2' и менять весь текст в тегах с указанным классом.