VPF::"Предпросмотр" на java-script - Форум программистов

gta4kv

Дата 27.5.2007, 20:09 (ссылка)

(нет голосов)

Загрузка ...

Walking around mad.

Профиль
Группа: Завсегдатай
Сообщений: 1868
Регистрация: 25.7.2006

Репутация: нет
Всего: 91

Здравствуйте!

Пытаюсь сделать простой предпросмотр на java-script'e но не совсем получается. ( Может есть у кого пример!? )

Мой скрипт прост до безобразия ( мне собственно так и надо) :

Код


<html>
<head>
    <title> ТЕСТ </title>
    <script language="JavaScript">
    
    function view () {
    text = document.getElementById('test');
    views = document.getElementById('content');
    views.innerHTML = text.value;
    }
    </script>
</head>

<body>
<form action="/?action=added">
<textarea cols="5" rows="5" name="test">  </textarea> <br>
<input type="submit" name="add" value="Добавить">
</form>
<input type="submit" onclick="javascript:view();" value="Предпросмотр">
<br><br>
<tr>
<td id=content></td>
</tr>
</body>

IE показывает : "Неизвестная ошибка выполнения." на строке 9 ( views.innerHTML = text.value; )

Как сделать правильно?

Заранее благодарен за помощь. smile

ps. Желательно что бы работало во всех браузерах

Это сообщение отредактировал(а) gta4kv - 27.5.2007, 20:10

Zeroglif

Дата 27.5.2007, 21:00 (ссылка)

(голосов:1)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 644
Регистрация: 22.9.2005

Репутация: 28
Всего: 66

Как минимум:

- теги таблицы материализуй, без них никак низзя;
- getElementById('test') ищет ID, которого нет в природе;
- переменные надо бы предварять словом var;
- протокол javascript при записи обработчика без надобности;

gta4kv

Дата 27.5.2007, 21:07 (ссылка)

(нет голосов)

Загрузка ...

Walking around mad.

Профиль
Группа: Завсегдатай
Сообщений: 1868
Регистрация: 25.7.2006

Репутация: нет
Всего: 91

Цитата(Zeroglif @ 27.5.2007, 21:00)

-?
-textarea cols="5" rows="5" name="test"
или нельзя так с текст-арей делать?
-исправил
-?

Zeroglif

Дата 27.5.2007, 21:20 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 644
Регистрация: 22.9.2005

Репутация: 28
Всего: 66

- <table><tr><td id=content></td></tr></table>;
- name - это не id, разные ж атрибуты;
- молодец;
- javascript:view();

gta4kv

Дата 27.5.2007, 21:51 (ссылка)

(нет голосов)

Загрузка ...

Walking around mad.

Профиль
Группа: Завсегдатай
Сообщений: 1868
Регистрация: 25.7.2006

Репутация: нет
Всего: 91

Спасибо всё сделал!

Общий результат получился :

Код


<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>  =- ТЕСТ -= </title>

<link rel="stylesheet" type="text/css" href="css/ext-all.css" />
<script type="text/javascript" src="js/yui-utilities.js"></script>
<script type="text/javascript" src="js/ext-yui-adapter.js"></script>
<script type="text/javascript" src="js/ext-all.js"></script>
<script language="javascript" src="js/resize.js"></script>
<link rel="stylesheet" type="text/css" href="css/examples.css" />

    <script language="JavaScript">
    
    function view () {
    var text = document.getElementById('wrapped');
    var views = document.getElementById('content');
    views.innerHTML = text.value;
    }
    

function TextAreaSelectionHelper(obj) {
  this.target=obj;
  this.target.carretHandler=this; 

  this.target.onchange=_textareaSaver;
  this.target.onclick=_textareaSaver;
  this.target.onkeyup=_textareaSaver;
  this.target.onfocus=_textareaSaver;
  if(!document.selection) this.target.onSelect=_textareaSaver; 
  
  this.start=-1;
  this.end=-1;
  this.scroll=-1;
  this.iesel=null; 
}

TextAreaSelectionHelper.prototype.getSelectedText=function() {
   return this.iesel? this.iesel.text: (this.start>=0&&this.end>this.start)? this.target.value.substring(this.start,this.end): "";
}

TextAreaSelectionHelper.prototype.setSelectedText=function(text, secondtag) {
  if(this.iesel) {
    if(typeof(secondtag)=="string") {
   var l=this.iesel.text.length;
      this.iesel.text=text+this.iesel.text+secondtag;
   this.iesel.moveEnd("character", -secondtag.length);
    this.iesel.moveStart("character", -l);   
    } else {
   this.iesel.text=text;
    }
    this.iesel.select();
  } else if(this.start>=0&&this.end>=this.start) {
     var left=this.target.value.substring(0,this.start);
     var right=this.target.value.substr(this.end);
  var scont=this.target.value.substring(this.start, this.end);
  if(typeof(secondtag)=="string") {
    this.target.value=left+text+scont+secondtag+right;
    this.end=this.target.selectionEnd=this.start+text.length+scont.length;
    this.start=this.target.selectionStart=this.start+text.length;    
  } else {
       this.target.value=left+text+right;
    this.end=this.target.selectionEnd=this.start+text.length;
    this.start=this.target.selectionStart=this.start+text.length;
  }
  this.target.scrollTop=this.scroll;
  this.target.focus();
  } else {
    this.target.value+=text + ((typeof(secondtag)=="string")? secondtag: "");
    if(this.scroll>=0) this.target.scrollTop=this.scroll;
  }
}

TextAreaSelectionHelper.prototype.getText=function() {
  return this.target.value;
}
TextAreaSelectionHelper.prototype.setText=function(text) {
  this.target.value=text;
}

function _textareaSaver() {
  if(document.selection) {
    this.carretHandler.iesel = document.selection.createRange().duplicate();
  } else if(typeof(this.selectionStart)!="undefined") {
    this.carretHandler.start=this.selectionStart;
    this.carretHandler.end=this.selectionEnd;
    this.carretHandler.scroll=this.scrollTop;
  } else {this.carretHandler.start=this.carretHandler.end=-1;}
}

onload=function(){text=new TextAreaSelectionHelper(document.getElementById('wrapped'));}

function b() {
    
 text.setSelectedText("<b>","</b>");

}

function i() {
 text.setSelectedText("<i>","</i>");
}

function u() {
 text.setSelectedText("<u>","</u>");

}

    </script>
    
<style type="text/css">
#basic, #animated {
    border:5px solid #c3daf9;
    color:#1e4e8f;
    font:bold 14px tahoma,verdana,helvetica;
    text-align:center;
    padding-top:20px;
}
#snap {
    border:1px solid #c3daf9;
    overflow:hidden;
}
#custom {
    cursor:move;
}
#custom-rzwrap{
    z-index: 100;
}
#custom-rzwrap .x-resizable-handle{
    width:11px;
    height:11px;
    background:transparent url(../../resources/images/sizer/square.gif) no-repeat;
    margin:0px;
}
#custom-rzwrap .x-resizable-handle-east, #custom-rzwrap .x-resizable-handle-west{
    top:45%;
}
#custom-rzwrap .x-resizable-handle-north, #custom-rzwrap .x-resizable-handle-south{
    left:45%;
}
</style>
</head>

<body
>
<script type="text/javascript" src="js/examples.js"></script><!-- EXAMPLES -->

<div id="animated">
<input type="submit" value="Жирный" onclick="b();">
<input type="submit" value="Наклоный" onclick="i();">
<input type="submit" value="Поддчёркнутый" onclick="u();">
<form action="/?action=view">

<textarea cols="80" rows="5" id="wrapped">  </textarea> 

<input type="submit" value="Добавить">
</form>
<input type="submit" value="Предпросмотр" onclick="view();">
<br>
<center><table><tr><br><br><td id=content></td></tr></table></center>
 
</div>    


<div id="basic" style="display:none;">


</div>

</body>
</html>

Это сообщение отредактировал(а) gta4kv - 27.5.2007, 22:00

0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| JavaScript: Общие вопросы \| Следующая тема »