2

我正在尝试创建一个摄像机列表,允许用户在需要时输入自定义名称。理想情况下,当他们选择复选框或周围的文本时,他们将能够更改文本。名称稍后需要存储在数据库中。

我尝试使用“易于编辑的文本”,但我无法弄清楚。这就是我所拥有的。任何帮助,将不胜感激。谢谢你。

<!DOCTYPE html> 
<html> 
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1"> 
        <title>FMVSS - Camera Selection</title> 
        <link rel="stylesheet"  href="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.css" />  
        <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.js"></script>
    </head> 

    <body> 
        <div data-role="page">
            <h1>Camera Selection</h1>
            <div data-role="content">
                <form action="#" method="get">
                    <h3>Camera request for: (Customer Name, passed or queryied)</h3>
                    <h3>Test Type: (Passed or queryied)</h3>
                    <div  data-role="fieldcontain">
                        <div><legend>Do a look-up to see what the default views are for the selected TEST TYPE</legend></div>
                        <div><legend>Allow custom entries</legend></div>

                        <fieldset data-role="Selections">
                            <div class="Fixed_Camera_Check_Box">                    
                                <input type="checkbox" name="CameraView-1" id="CameraView-1" />
                                <label for="CameraView-1">Oblique View From Front (Left Hand Side)</label>
                            </div>
                            <div class="Fixed_Camera_Check_Box"> 
                                <input type="checkbox" name="CameraView-2" id="CameraView-2" />
                                <label for="CameraView-2">Oblique View From Front (Right Hand Side)</label>
                            </div>
                            <div class="Fixed_Camera_Check_Box"> 
                                <input type="checkbox" name="CameraView-3" id="CameraView-3" />
                                <label for="CameraView-3">Oblique View From Rear (Right Hand Side)</label>
                            </div>
                            <div class="Custom_Camera_Check_Box"> 
                                <input type="checkbox" name="CameraView-7" id="CameraView-7" />
                                <label class="custom" for="CameraView-7">Custom Camera View #1 ***Value should be editable by user***</label>
                            </div>
                            <div class="Custom_Camera_Check_Box">
                                <input type="checkbox" name="CameraView-8" id="CameraView-8" />
                                <label class="custom" for="CameraView-8">Custom Camera View #2</label>
                            </div>
                        </fieldset>
                    </div>
                </form>
            </div><!-- /content -->
        </div><!-- /page -->
    </body>
</html>
<script>
    $(document).ready(function(){

        $('.custom').click(function(){ //this runs when you click on the 
            $(this).html('New Label Here'); //I can edit the label here, so I know I am in the right place
            //$(this).hide(); //Should hide the label making room for the input
            $(this).append('<input class="custom_edit" type="text" value="Custom Camera View"/>'); //Puts an input field in the form
        });

        $('.custom_edit').blur(function() { //this runs after you click out of textbox 
             if ($.trim(this.value) == '')  //If there is nothing in the textbox do this
                 {}  //put previous value back
             else //If there is something in the textbox do this
                 {$(this).prev().html(this.value);} //Put new value into label
             $(this).hide(); //Hides text box
             $(this).prev().show(); //Shows the label
         });

          $('.custom_edit"]').keypress(function(event) { //runs on every keystroke while in a textbox, looking for enter
              if (event.keyCode == '13') 
                { //"ENTER" was pressed alert('1');
                    if ($.trim(this.value) == '')  //If there is nothing in the textbox do this
                         {}  //put previous value back and unselect checkbox
                    else//If there is something in the textbox do this
                        {$(this).prev().html(this.value);} //Put new value into label 
                    $(this).hide(); //Hides the edit box
                    $(this).prev().show(); //Shows the label
                }
          });


        $('input[type=checkbox]').on('click',function(e) {
            if( $('input[type=checkbox]:checked').length == 3 ) 
                {$('input[type=checkbox]:not(:checked)').attr('disabled','disabled');}
            else
                {$('input[type=checkbox]:not(:checked)').removeAttr('disabled');}
        });//endo of checkbox click functions

    });//end of document ready
</script>
4

1 回答 1

1

试一试。

单击相机标签进行编辑。

<!DOCTYPE html> 
<html> 
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1"> 
        <title>FMVSS - Camera Selection</title> 
        <link rel="stylesheet"  href="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.css" />  
        <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.js"></script>
    </head> 

    <body> 
        <div data-role="page">
            <h1>Camera Selection</h1>
            <div data-role="content">
                <form action="#" method="get">
                    <h3>Camera request for: (Customer Name, passed or queryied)</h3>
                    <h3>Test Type: (Passed or queryied)</h3>
                    <div  data-role="fieldcontain">


                        <fieldset data-role="Selections">

                        <legend>Allow custom entries - click on the label to edit</legend>

                            <div class="Fixed_Camera_Check_Box">                    
                                <input type="checkbox" name="CameraView-1" id="CameraView-1" />
                                <label for="CameraView-1">Oblique View From Front (Left Hand Side)</label>
                            </div>
                            <div class="Fixed_Camera_Check_Box"> 
                                <input type="checkbox" name="CameraView-2" id="CameraView-2" />
                                <label for="CameraView-2">Oblique View From Front (Right Hand Side)</label>
                            </div>
                            <div class="Fixed_Camera_Check_Box"> 
                                <input type="checkbox" name="CameraView-3" id="CameraView-3" />
                                <label for="CameraView-3">Oblique View From Rear (Right Hand Side)</label>
                            </div>
                            <div class="Custom_Camera_Check_Box"> 
                                <input type="checkbox" name="CameraView-7" id="CameraView-7" />
                                <label class="custom" for="CameraView-7">Custom Camera View #1 ***Value should be editable by user***</label>
                            </div>
                            <div class="Custom_Camera_Check_Box">
                                <input type="checkbox" name="CameraView-8" id="CameraView-8" />
                                <label class="custom" for="CameraView-8">Custom Camera View #2</label>
                            </div>
                        </fieldset>
                    </div>
                </form>
            </div><!-- /content -->
        </div><!-- /page -->

        <script>
            $(document).ready(function () {

                var editCameraLabel = function (label) {

                    label.hide();
                    var labelText = label.text();

                    label.after("<input type='text' value='" + labelText + "' /><input type='button' value='Save' />");

                    var input = label.next();
                    input.focus();

                    var saveButton = input.next();

                    saveButton.click(function () {

                        labelText = input.val();
                        label.text(labelText);
                        input.remove();
                        $(this).remove();
                        label.show();
                    });
                };

                $('label').click(function () {

                    editCameraLabel($(this));

                });

            });//end of document ready
</script>

    </body>
</html>
于 2012-09-07T01:52:57.283 回答