Question

我有一些预制的javascript，它与来自我的数据库的预制回复的表单进行交互。单击插入按钮时没有任何反应，并且chrome显示错误：Uncaught TypeError：无法读取属性'selectionStart'为null

这是javascript / php / html：

 <tr><?php echo tep_draw_form('status', FILENAME_ORDERS, tep_get_all_get_params(array('action')) . 'action=update_order'); ?>
         <td class="main">
            <script language="javascript">  
                  function insereTexto(){  
                     //Paste into textarea
                     var textarea = document.getElementById("txt");  

                     //Text to be inserted  
                     var texto = document.getElementById("txtValor").value;  

                     //beginning of the selection 
                     var sel_start = textarea.selectionStart;              

                     //end of the selection  
                     var sel_end = textarea.selectionEnd;  


                     if (!isNaN(textarea.selectionStart))  
                     //Treatment for Mozilla
                     {  
                        var sel_start = textarea.selectionStart;  
                        var sel_end = textarea.selectionEnd;  

                        mozWrap(textarea, texto, '')  
                        textarea.selectionStart = sel_start + texto.length;  
                        textarea.selectionEnd = sel_end + texto.length;  
                     }     

                     else if (textarea.createTextRange && textarea.caretPos)   
                     {  
                        if (baseHeight != textarea.caretPos.boundingHeight)   
                        {  
                           textarea.focus();  
                           storeCaret(textarea);  
                        }        
                        var caret_pos = textarea.caretPos;  
                        caret_pos.text = caret_pos.texto.charAt(caret_pos.texto.length - 1) == ' ' ? caret_pos.text + text + ' ' : caret_pos.text + text;  

                     }  
                     else //For those who can not enter, insert at the end of it (ie. ..)
                     {  
                        textarea.value = textarea.value + texto;  
                     }        
                  }  

                  /* 
                  This function opens the text of two strings and inserts the text at the cursor position well after he joins novamento text but the text entered
This wonderful feature only works in Mozilla ... IE does not have the properties SelectionStart, textLength ...
                  */  
                  function mozWrap(txtarea, open, close)  
                  {  
                     var selLength = txtarea.textLength;  
                     var selStart = txtarea.selectionStart;  
                     var selEnd = txtarea.selectionEnd;  
                     var scrollTop = txtarea.scrollTop;  

                     if (selEnd == 1 || selEnd == 2)   
                     {  
                        selEnd = selLength;  
                     }  
                     //S1 has the text from the beginning to the cursor position 
                     var s1 = (txtarea.value).substring(0,selStart);  

                     //S2 has the selected text 
                     var s2 = (txtarea.value).substring(selStart, selEnd)  

                     //S3 has all the selected text  
                     var s3 = (txtarea.value).substring(selEnd, selLength);  

                     //Places the text in the textarea. Uses the string that was in the beginning, in the middle of the input string, then the selection string then the
                     //closing and finally what's left after the selection
                     txtarea.value = s1 + open + s2 + close + s3;           
                     txtarea.selectionStart = selEnd + open.length + close.length;  
                     txtarea.selectionEnd = txtarea.selectionStart;  
                     txtarea.focus();  
                     txtarea.scrollTop = scrollTop;  
                     return;  
                  }  
                  /* 
                  Insert at Caret position. Code from 
                   [url]http://www.faqts.com/knowledge_base/view.phtml/aid/1052/fid/130[/url] 
                  */  
                  function storeCaret(textEl)  
                  {  
                        if (textEl.createTextRange)  
                        {  
                           textEl.caretPos = document.selection.createRange().duplicate();  
                        }  
                  }  

                </script>  

                                <select id="txtValor" /> 
                                <option value="">Select Text</option>
                                <option value="<?php echo $order->customer['name']; ?>">Customer Name</option>
                                <option value="<?php echo STORE_NAME_ADDRESS; ?>">signature</option>
                                <option value="<?php echo STORE_NAME; ?>">Store Name</option>
                                <option value="<?php echo $_SERVER['SERVER_NAME']; ?>">Site</option>
                                <option value="<?php echo STORE_OWNER; ?>">Store Owner</option>
                                <option value="<?php echo STORE_OWNER_EMAIL_ADDRESS; ?>">Email the Store</option>
                                <?php
                                $get_premades_query = tep_db_query("select * from orders_premade_comments order by id");
                                while($result = mysql_fetch_array($get_premades_query)) {
                                echo '<option value="'.$result["text"].'">'. $result["title"].'</option>';
                                }
                                ?>
                                </select>
                                <input type="button" value="Insert at the cursor position" onclick="insereTexto()"/>  
                                <input type="button" value="Clean" onclick="this.form.elements['comments'].value=''">
                                    <font class="smallText"><a href="premade_comments.php">[Setup]</a></font><br>


        <?php echo tep_draw_textarea_field('comments', 'soft', '80', '10','','id="txt"'); ?></td>
      </tr>

我真的不太了解javascript，php正在调用正确的数据库字段，我可以正确回显它们。但我猜测selectionStart函数没有正确使用？

Answer 1

消息说：

Cannot read property 'selectionStart' of null

这是正确的：null没有属性，因此它不能有selectionStart。

那么null来自哪里？ .selectionStart要求textarea：

                 //beginning of the selection 
                 var sel_start = textarea.selectionStart;

和textarea来自DOM：

   //Paste into textarea
   var textarea = document.getElementById("txt");

显然，getElementById()调用返回null而不是某些内容。

你应该检查HTML以验证是一个id为txt的textarea。您还可以添加显式检查，以防间歇性地发生：

   //Paste into textarea
   var textarea = document.getElementById("txt");
   if (!textarea)
       alert("Och! No txt textarea defined?");

......当它发生时，检查HTML源代码以验证发生这种情况的原因。也许你并不总是展示textarea，也许是ID变化等等。

Answer 2

这是你的问题

 var textarea = document.getElementById("txt");

未在您的文档中定义

另一个警告：使用不支持的html标记

<font class="smallText"><a href="premade_comments.php">[Setup]</a></font>

HTML 5中不支持<font>标记，HTML 4.01中已弃用
这是一个提示： 使用php短手回音符号来表示代码可读性。

这<?php echo STORE_NAME_ADDRESS; ?>

与<?=STORE_NAME_ADDRESS ?>相同，在制作多个echo语句时看起来更好

未捕获的TypeError：无法读取null的属性“selectionStart”

2 个答案: