Форум

zoOmer · #1 (**permalink**) 29.11.2014, 11:28

Добрый день ув. разработчики помогите реализовать такую вещь.

Нужно что б при написании текста в поле textarea появлялась кнопка.

Вот получилось сделать так но при нажатии на кнопку она исчезает...
А, нужно чтоб при написании кнопка появлялась и при отсутствии текста исчезала и не исчезала при нажатии на нее как я писал выше.

<!DOCTYPE HTML>
<html>
<head>
  <meta charset="utf-8">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
</head>

<body>
<textarea id="pole" cols="30" rows="10"></textarea><br>

<button style="display: none">Ok</button>
 <script>
    $(document).ready(function(){
    $('#pole').on('keyup', function(){
        $('button').fadeIn();
    });
    $('#pole').blur(function(){
        $('button').fadeOut();
    });
});
  </script>
</body>

</html>

И еще как сделать чтоб кнопка появлялась при вставки ссылок в поле input.

Заранее огромное спасибо за помощь!

krutoy · #2 (**permalink**) 29.11.2014, 12:10

<!DOCTYPE HTML>
<html>
  <head><meta charset="windows-1251" /> </head>
  <body>
<textarea></textarea>
<button style="display: none">push</button>
 <script>
button=document.querySelector("button")
textarea=document.querySelector("textarea")
textarea.oninput=function(){
   if(this.value==="") return button.style.display="none"
   button.style.display="block"
}
 </script>
  </body>
</html>

krutoy · #3 (**permalink**) 29.11.2014, 12:13

Сообщение от zoOmer

И еще как сделать чтоб кнопка появлялась при вставки ссылок в поле input.

точно так же. Если ссылки надо проверять на валидность, то дай шаблон

zoOmer · #4 (**permalink**) 29.11.2014, 16:47

krutoy, Спасибо))))
На счет второго нет не нужно проверять. Просто есть обычное текстовое поле в котором можно вводить обычный текст но нужно сделать так чтоб при вставке в него ссылки появлялась кнопка.

Нужно искать регулярным выражением или как еще?

zoOmer · #5 (**permalink**) 29.11.2014, 16:55

Сообщение от krutoy

<!DOCTYPE HTML>
<html>
  <head><meta charset="windows-1251" /> </head>
  <body>
<textarea></textarea>
<button style="display: none">push</button>
 <script>
button=document.querySelector("button")
textarea=document.querySelector("textarea")
textarea.oninput=function(){
   if(this.value==="") return button.style.display="none"
   button.style.display="block"
}
 </script>
  </body>
</html>

А как повесить по Айди?

krutoy · #6 (**permalink**) 29.11.2014, 19:09

Сообщение от zoOmer

А как повесить по Айди?

<!DOCTYPE HTML>
<html>
  <head><meta charset="windows-1251" /> </head>
  <body>
<textarea id="textarea"></textarea>
<button style="display: none" id="button">push</button>
 <script>
button=document.querySelector("#button")
textarea=document.querySelector("#textarea")
textarea.oninput=function(){
   if(this.value==="") return button.style.display="none"
   button.style.display="block"
}
 </script>
  </body>
</html>

krutoy · #7 (**permalink**) 29.11.2014, 19:50

Сообщение от zoOmer

krutoy, Спасибо))))
На счет второго нет не нужно проверять. Просто есть обычное текстовое поле в котором можно вводить обычный текст но нужно сделать так чтоб при вставке в него ссылки появлялась кнопка.

Нужно искать регулярным выражением или как еще?

попробуй вот так

<!DOCTYPE HTML>
<html>
  <head><meta charset="windows-1251" /> </head>
  <body>
<input id="input" />
<button style="display: none" id="button">push</button>
 <script>
button=document.querySelector("#button")
input=document.querySelector("#input")
input.oninput=function(){
   if(/(\s+|^)http(s)?:\/\/[.\w-]+\.\w{2,3}(\s+|$)/.test(this.value)) return button.style.display="block"
   button.style.display="none"
}
 </script>
  </body>
</html>

Кнопка будет появляться в случае появлния ссылки в тексте. Проверка не идеальная, но для сельской местности пойдет. Если же надо, чтобы не было ничго кроме ссылки, надо по другому:

<!DOCTYPE HTML>
<html>
  <head><meta charset="windows-1251" /> </head>
  <body>
<input id="input" />
<button style="display: none" id="button">push</button>
 <script>
button=document.querySelector("#button")
input=document.querySelector("#input")
input.oninput=function(){
   if(/^http(s)?:\/\/[.\w-]+\.\w{2,3}$/.test(this.value)) return button.style.display="block"
   button.style.display="none"
}
 </script>
  </body>
</html>

Форум

Справочник

Discord чат

Курсы javascript