zoukankan      html  css  js  c++  java
  • 文本框脚本_取得文本_跨浏览器_P421

    一、取得_用户在文本框中选择的文本

    <!DOCTYPE html>
    <html>
    <head>
        <title>文本框脚本_取得选择的文本</title>
        <script type="text/javascript" src="EventUtil.js"></script>
    </head>
    <body>
        <p>Select some text in the textbox.</p>
        <form method="post" action="javascript:alert('Form submitted!')" id="myForm">        
            <div>
                <label for="comments">Type something:</label><br>
                <input type="text" id="txtStuff" name="stuff" value="Default value">
            </div>
            <input type="submit" value="Submit Form" id="submit-btn">
        </form>     
        <script type="text/javascript">
            (function(){
            
                function getSelectedText(textbox){
                    if (typeof textbox.selectionStart == "number"){
                        return textbox.value.substring(textbox.selectionStart, 
                                textbox.selectionEnd);                
                    } else if (document.selection){
                        return document.selection.createRange().text;
                    }
                }
                              
                EventUtil.addHandler(window, "load", function(event){
                    var textbox = document.forms[0].elements[0];
        
                    EventUtil.addHandler(textbox, "select", function(event){
                        console.log(getSelectedText(textbox));
                    });
        
                    textbox.focus();
                });               
            })();
        
        </script>
    </body>
    </html>

    二、取得_文本框中部分文本

    <!DOCTYPE html>
    <html>
    <head>
      <title>Textbox Partial Selection Example</title>
      <script type="text/javascript" src="EventUtil.js"></script>
    </head>
    <body>


      <p>Select some text in the textbox.</p>


      <form method="post" action="javascript:alert('Form submitted!')" id="myForm">
        <div>
          <label for="comments">Type something:</label><br>
          <input type="text" id="txtStuff" name="stuff" value="Default value">
        </div>
        <input type="button" value="Select some text" id="select-btn">
      </form>


    <script type="text/javascript">


    (function(){
      function selectText(textbox, startIndex, stopIndex){
        if (textbox.setSelectionRange){
          textbox.setSelectionRange(startIndex, stopIndex);
        } else if (textbox.createTextRange){
          var range = textbox.createTextRange();
          range.collapse(true);
          range.moveStart("character", startIndex);
          range.moveEnd("character", stopIndex - startIndex);
          range.select();
        }
        textbox.focus();
      }

      var btn = document.getElementById("select-btn");
      EventUtil.addHandler(btn, "click", function(event){
        var textbox = document.forms[0].elements[0];
        selectText(textbox, 4, 7);
      });


    })();

    </script>
    </body>
    </html>

  • 相关阅读:
    python 文件读写操作(转抄)
    kubernetes之kubeadmin安装部署
    bash之字符串处理(核心重点)
    blocking and nonblocking
    文件格式转换
    解压.asar
    Cocos Creator Editor 编辑器扩展记录
    CocosCreator 警告:Please set node's active instead of rigidbody's enabled
    Unity 垂直翻转位图颜色数据
    CocosCreator 动态设置属性在Properties面板显示/隐藏
  • 原文地址:https://www.cnblogs.com/jiunie/p/13345491.html
Copyright © 2011-2022 走看看