文章/答案/技术大牛

发布

社区首页 >问答首页 >如何在html中创建两行文本框占位符保持不变

问如何在html中创建两行文本框占位符保持不变
EN

Stack Overflow用户

提问于 2015-07-20 09:32:17

回答 4查看 2.2K关注 0票数 1

我想创建一个像HTML，JS中附加的图像的文本框。请分享一些想法。

在图中你可以看到3个案例

最成功的案例

中间-电话号码为空时的默认值文本框中显示占位符电话号码

当用户输入电话号码时，底部占位符显示在顶部

html

回答 4

Stack Overflow用户

发布于 2015-07-20 09:41:59

是的，你可以，你需要JQuery来做到这一点。

var placeholder = 'This is a line \nthis should be a new line';
$('textarea').attr('value', placeholder);

$('textarea').focus(function(){
    if($(this).val() === placeholder){
        $(this).attr('value', '');
    }
});

$('textarea').blur(function(){
    if($(this).val() ===''){
        $(this).attr('value', placeholder);
    }    
});

textarea{
    width:300px;
    height:100px;
    color:gray;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<textarea></textarea>

<textarea></textarea>

来源：http://jsfiddle.net/airandfingers/pdXRx/247/

票数 1

Stack Overflow用户

发布于 2015-07-20 09:40:47

示例1

我有一个例子可以帮助你理解你提出的这个问题。

HTML

<body ng-app>
  <label for="pN">Phone number:</label>
  <input id="pN" type="text" value="1-800-CALL-MOM"></input>
<div style="height: 10px; border-bottom: 1px dotted silver;margin-bottom: 10px;"></div>

<div class="wrapper">PhoneNumberToDisplay: <div id="out1"></div></div>

<div class="wrapper">Letters Converted: <div id="out2"></div></div>

<div class="wrapper">PhoneNumberToDial: <div id="out3"></div></div>


  <div id="out4"></div>
  <div id="out3"></div>
</body>

CSS

* { font-family: sans-serif; padding: 4px; }
#out1,#out2,#out3 { color: #999; display: inline-block;}
#out1 {
  font-weight: bold;
}

JavaScript

var phoneLetterToDigit = ['2','2','2','3','3','3','4','4','4','5','5','5','6','6','6','7','7','7','7','8','8','8','9','9','9','9'];

var raw = '';
var digitsReplaced = '';
var numbersOnly = '';

$('#pN').keyup(function () {
  update();
});

function update() {
  raw = $("#pN").val();
  digitsReplaced = '';

  $.each(raw.split(''), function(a,b) {
    var l = b.toUpperCase().charCodeAt(0) - 65;

    if (l >= 0 && l <= 25) {
       digitsReplaced += phoneLetterToDigit[l];
    }
    else {
      digitsReplaced += b;
    }
  });

  numbersOnly = digitsReplaced.replace(/[^0-9.]/g,'');

  $("#out1").html(raw);
  $("#out2").html(digitsReplaced);
  $("#out3").html(numbersOnly);
}

update();

你可以在这里看到行为：

JSFIDDLE

票数 0

Stack Overflow用户

发布于 2015-07-20 21:20:56

示例2

我想再次尝试用另一个代码示例来帮助您。

HTML

<h1>Phone field scrubbing utility</h1>

<ul>
    <li>Enter any content (characters, puntuation, etc.)</li>
    <li>As long as there are 10 digits it will validate true</li>
    <li>Providing the first digit is not 0 or 1</li>
    <li>And providing there is not 1 digit repeated 10 times</li>
    <li>The &quot;format it&quot; button will do just that</li>
    <li>The &quot;submit it&quot; button will strip out everything but digits</li>
</ul>

<input class="phone" id="phone1" value="XXXXXXXXXX"><br>
<input class="phone" id="phone1" value="XXXXXXXXXX"><br>
<input class="phone" id="phone1" value="XXXXXXXXXX"><br>
<input type="button" id="format" value="format it">
<input type="button" id="submit" value="submit it">

CSS

body{
  font-family: Arial, sans-serif;
  margin: 25px;
}
input{
    font-size: xx-large; 
    border: 2px solid #555;
    margin: 10px;
    padding: 10px;
}
.on{
    border: 2px dashed #555;
/*  background: rgba(255, 215, 0,.15);
    color: rgb(255, 215, 0);*/
}
.goodClass{
    /*border: 1px solid rgb(0, 255, 0);*/
    background: rgba(0, 255, 0, .15);
    color: rgb(0, 255, 0);
}
.badClass{
    /*border: 1px solid rgb(255, 0, 0);*/
    background: rgba(255, 0, 0,.15);
    color: rgb(255, 0, 0);
}

JavaScript

$(function(){
    $('#phone1').phoneScrubber({
            focusClass: 'on',
            goodClass: 'goodClass',
            badClass: 'badClass',
            testOnKeyup: true
    });

    $.fn.phoneScrubber.formatAll();

    $('#format').click(function(){
        $.fn.phoneScrubber.formatAll();
    });

    $('#submit').click(function(){
        if($.fn.phoneScrubber.validateAll()){
            $.fn.phoneScrubber.submitAll();
        }
    });
});

(function($) {
    $.fn.phoneScrubber = function(opts) {

        var
        obj = this,
            defaults = {
                    phoneCleaner    : /\D/g 
                    , repeated      : /(.)\1{9,}/g
                    , minLen        : 10
                    , omit          : [0, 1]
                    , format        : '() -'
                    , focusClass    : null
                    , testOnKeyup   : true
                    , goodClass     : null
                    , badClass      : null
                    , formatOnBlur  : false
            }, settings = $.extend({}, defaults, opts)
                    , testStr
                    , aFormat   = settings.format.split('')
                    , pre1      = aFormat[0]
                    , pre2      = aFormat[1] + aFormat[2]
                    , sep       = aFormat[3]
                    , message   = ''
                    , part1     = ''
                    , part2     = ''
                    , part3     = ''
                    , returnVal = ''
                    , setVal
                    , test
                    , cleanIt
                    , formatNumber
                    , cleanNumber
                    , errCount  = 0
                    , errs      = []
                    ;

        return this.each(function() {

            test = function(dirty) {
                var test        = dirty.replace(settings.phoneCleaner,'')
                    , testLen   = test.length
                    , startChar = parseInt(test.substring(0,1))
                    , testStr   = test.substring(0,10)

                if(testLen < settings.minLen){
                    // message = 'invalid length: '+testLen;
                    // alert(message);
                    return false;
                }

                if(settings.omit.indexOf(startChar)!==-1){
                    // message = 'First character cannot be '+startChar;
                    // alert(message);
                    return false;
                }

                if(testStr.match(settings.repeated)){
                    // message = "Nice try... repeated characters";
                    // alert(message);
                    return false;
                }
                return true;
            }

            cleanIt = function(dirty){
                return dirty.replace(settings.phoneCleaner,'');
            }         

            $.fn.phoneScrubber.formatNumber = function(dirty) {
                var clean = cleanIt(dirty);
                clean = clean.substring(0, settings.minLen)
                part1 = clean.substring(0,3);
                part2 = clean.substring(3,6);
                part3 = clean.substring(6,10);

                returnVal = pre1+part1+pre2+part2+sep+part3;
                return returnVal;
            }

            $.fn.phoneScrubber.cleanNumber = function(dirty) {
                var clean = cleanIt(dirty);
                clean = clean.substring(0, settings.minLen)
                return clean;
            }

            $.fn.phoneScrubber.formatAll = function(){
                obj.each(function(){
                    var $this = $(this);
                    if(test($this.val())){
                        $this.val($.fn.phoneScrubber.formatNumber($this.val()));
                    }
                });
            }

            $.fn.phoneScrubber.validateAll = function(){

                var returnVal = true;

                errs = [];

                obj.each(function(){
                    if (test($(this).val())==false){
                        returnVal = false;
                        errs.push(this);
                    }
                });
                return returnVal;
            }

            $.fn.phoneScrubber.getErrFields = function(){
                return errs;
            }

            $.fn.phoneScrubber.submitAll = function(){
                obj.each(function(){
                    var $this = $(this);
                    if(test($this.val())){
                        $this.val($.fn.phoneScrubber.cleanNumber($this.val()));
                    }
                });
            }

            obj.focus(function() {
                $(this).addClass(settings.focusClass);
            })
                .keyup(function() {
                    var $this = $(this);
                    if(settings.testOnKeyup){
                        if(test($this.val())){
                            // good
                            $this
                                .removeClass(settings.badClass)
                                .addClass(settings.goodClass);
                        }else{
                            // bad
                            $this
                                .removeClass(settings.goodClass)
                                .addClass(settings.badClass);
                        }
                    }
            })
                .blur(function() {
                    var $this = $(this);
                    $this.removeClass(settings.focusClass);
                    if(test($this.val())){
                        if(settings.formatOnBlur){
                            $this.val(formatNumber($this.val()));
                    }
                }
            });
        });
    }
})(jQuery);

源代码：JSFIDDLE

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/31507729

复制

相似问题

问如何在html中创建两行文本框占位符保持不变
EN

回答 4

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在html中创建两行文本框占位符保持不变EN

回答 4

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在html中创建两行文本框占位符保持不变
EN