# div edit on focus

# div edit on focus

by jihoon kim

HTML

<html>
<title>div edit on focus</title>
    <head>
    </head>
    <body>
<h1>div edit on focus</h1>    
        <div id="divNum" contentEditable=true tabIndex=1>123</div>
    </body>
    <script>

$(document).ready(function () {
		$("#divNum").attr('data-orig',$( "#divNum" ).text());

        $("#divNum").focus(function() {
			console.info( $(this).attr("id") + "line focus" , this );
			selectText($(this)[0]);
		});

		$("#divNum").keydown(function(e) {
			if ( e.keyCode == 13 ) {
				$(this).trigger("blur");
				e.preventDefault();
			}
		});
		
		$("#divNum").keyup(function(e) {
			var v = $(this).text().replace(/[^0-9]/g,"");
			if ( v.length > 3 ) {
				v = v.substring(0,v.length-1);
				$(this).
				$(ă…›this).trigger("blur");
			}

		});

		$("#divNum").blur(function() {
			if ($(this).text() == $(this).attr('data-orig')) { // no change
				console.info("no change", this);
			} else { // change
				var v = $(this).text().replace(/[^0-9]/g,"");

				if ( v ) {
					$(this).text(v);
				} else {
					if ( $(this).attr("id") == "divNum" ) {
						v = "250";
//					} else if ( $(this).attr("id") == "trend2_value" ) {
//						v = "175";
					}
				}
				$(this).attr('data-orig',v);				
				$(this).text(v);
				if ( $(this).attr("id") == "trend1_value" ) {
					tripL= v;
					localStorage.setItem("tripL", v);
				} else if ( $(this).attr("id") == "trend2_value" ) {
					alarmL= v;
					localStorage.setItem("alarmL", v);					
				}
				//setTrendLine(!$( "#trend1").hasClass("disabled"),!$( "#trend2").hasClass("disabled"));

				console.info("change", v, this);
			}
		});

        function selectText (element) {
            var doc = document;
        //		var text = doc.getElementById(element);
        // 	var text = $(element)[0];
            var text = element;
            if (doc.body.createTextRange) { // ms
                var range = doc.body.createTextRange();
                range.moveToElementText(text);
                range.select();
            } else if...